/* ===========================================================================
   lg.text-head — the bar across the top of a reading or listening text
   ---------------------------------------------------------------------------
   back · name · level · worksheet. Built for the reading text and shared
   with the listening exercise, which prints the same markup - hence the
   lg-read__ names, kept so neither page's markup or script had to change.

     .content.lg-read__head
       a.lg-read__back          chevron to the list
       .lg-read__name           the text's title
       .lg-card__level          lg.suggestions.css
       a.lg-sheet__pdf          lg.sheet-list.css, + .lg-read__pdf here
   =========================================================================== */

/* --- The head bar -------------------------------------------------------- */
/* THE GRAMMAR SHEET'S BAR, for a text. Every value here is .lg-exercise-head's
   from lg.exercise.css - the sticky offset, the z-index, the gap, the padding,
   the hairline, the ground, the chevron's size and colour. A reader moving
   between the two sections is looking at one control, and it should not shift
   by two pixels when they do.

   NOT the same class, though. .lg-exercise-head belongs to a component with a
   topic line, a sheet name and a view switch, and this bar has a text name, a
   level pill and a worksheet button. Borrowing the class would mean the next
   change to either one silently moved the other. Where a rule here matches one
   there, they are meant to stay in step - the same arrangement lg.texts.css has
   with lg.suggestions.css.

   position:sticky with the same top: the bar has to clear the site header,
   which measures itself into --lg-header-offset (see lg.core.css). The
   hairline is what separates it from the page scrolling underneath - without a
   border the text simply slides behind a floating row.

   This IS the .content element, not a bar inside one (reading-listening.php
   :1266). Sticky only travels inside its parent's box, and a bar wrapped in a
   .content of exactly its own height has nowhere to go - it stuck for nought
   pixels, which reads as not sticky at all. As .content itself its parent is
   .container, the page, so it has the whole scroll to travel.

   It also keeps .content's 2rem side padding, which is the inset the bar had
   before this change and what holds it steady against the columns below.
   Hence padding-top and padding-bottom as longhands: the shorthand would
   flatten those sides to zero and shove the bar to the window edge. */
.lg-read__head {
	position: sticky;
	top: var(--lg-header-offset);
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding-top: 0.9rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--lg-border);
	background-color: var(--lg-bg);
}

/* A chevron on its own, not "« back". At this size the word is the only thing
   that would wrap, and the destination is one tap away and obvious. The label
   is still there for a screen reader. */
.lg-read__back {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-left: -0.5rem;
	border-radius: 50%;
	color: var(--lg-text-muted);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.lg-read__back:hover {
	background-color: var(--lg-surface-alt);
	color: var(--lg-text);
	text-decoration: none;
}

.lg-read__back:focus-visible {
	outline: 2px solid var(--lg-red);
	outline-offset: 2px;
}

.lg-read__back svg {
	width: 1.3rem;
	height: 1.3rem;
}

/* .lg-exercise-head__name's type, to the tenth of a rem. min-width:0 so a long
   name truncates instead of pushing the worksheet button off the row - the
   name is the only thing on the bar that can afford to give way. */
/* The section over the name, as .lg-exercise-head__titles / __topic in
   lg.exercise.css: same values, kept in step by hand like the bar itself.
   The wrapper is what the row lays out now, so it carries the flex share and
   the min-width that let a long name truncate; the name just fills it. */
.lg-read__titles {
	flex: 1 1 auto;
	min-width: 0;
}

.lg-read__section {
	display: block;
	margin-bottom: 0.15rem;
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* An <h1> on listening, a <span> on reading. margin/padding: a.css gives
   every h1 a bottom margin (and 7px of it on a phone). */
.lg-read__name {
	display: block;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.2;
}

/* The level pill sits between the name and the button, so it must not be the
   thing that gives way when the row is tight. */
.lg-read__head .lg-card__level {
	flex: 0 0 auto;
}

.lg-read__pdf {
	flex: 0 0 auto;
	margin-left: auto;
}

@media (max-width: 649px) {
	/* No gap between the site header and the head bar. At 576px and below
	   a.css (:3099) gives .main .container a 1.5% padding-top, and the head
	   bar is that container's first child, so the strip of background
	   showed between the two bars. Only for the page that has the bar. */
	.main .container:has(> .lg-read__head) {
		padding-top: 0;
	}

	/* A slimmer sticky head bar: on a phone it sits over the text all the
	   way down, so every rem it gives back goes to reading. Longhands, as
	   in the base rule, so .content's side padding stays. */
	.lg-read__head {
		padding-top: 0.7rem;
		padding-bottom: 0.8rem;
	}
}