/* ===========================================================================
   lg-bottom-nav — the bar along the foot of a phone screen
   ---------------------------------------------------------------------------
   Five slots: Home, three sections, More. Renderer in
   _components/lg-bottom-nav.php.

     .lg-bottom-nav
       .lg-bottom-nav__inner
         a|button.lg-bottom-nav__item   (+ --active)
           svg.lg-bottom-nav__icon
           .lg-bottom-nav__label

   MOBILE ONLY

   Hidden from 650px up. That number is not chosen here - it is a.css:1254,
   where .navigation goes back to display:block and the header stops being a
   burger. So the bottom bar is on screen exactly while the top menu is not,
   and there is neither a width with two navigations nor one with none.

   It was 900px, which left a 250px band where the header was already a burger
   and nothing had replaced it.

   Both a LINK and a BUTTON can be an item: the renderer emits whichever the
   item is, and everything below is written to style the two identically -
   a button brings its own font, background, border and text-align, and every
   one of them has to be put back.
   =========================================================================== */

/* How tall the bar is, in one place.

   It is declared here rather than written twice because two rules need it and
   they are 100 lines apart: the item's min-height, which makes the bar that
   tall, and the body's padding-bottom, which keeps the page from ending
   underneath it. They were 4.6rem and 4rem for a while - the bar grew and the
   space reserved for it did not, so the last few pixels of every page sat under
   the navigation. A variable is the only version of this that cannot drift. */
:root {
	--lg-bottom-nav-height: 4.2rem;
}

.lg-bottom-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	/* Over the page, under a modal. a.css puts the header at 6 and its overlay
	   at 6 as well; this sits below both, because a dialog that can be covered
	   by the navigation is a trap. */
	z-index: 5;
	background-color: var(--lg-surface);
	border-top: 1px solid var(--lg-border);
	/* The bar is opaque and the content scrolls under it, so it needs a shadow
	   upward to say it is a layer rather than the end of the page. */
	box-shadow: 0 -2px 10px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.07);
	font-family: var(--lg-font);
}

/* The home indicator on a modern phone sits over the bottom of the screen.
   env() keeps the row of targets above it; the fallback is 0, so a device
   without a notch loses nothing. */
.lg-bottom-nav__inner {
	display: flex;
	align-items: stretch;
	max-width: 40rem;
	margin: 0 auto;
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* flex:1 so the five share the width evenly and every target is the same size
   - a thumb does not aim, and the tab it hits should not depend on how long
   the word under it is. */
.lg-bottom-nav__item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	/* Clears the 44px minimum target on its own, label included. */
	min-height: var(--lg-bottom-nav-height);
	padding: 0.45rem 0.25rem 0.5rem;
	border: 0;
	background: none;
	color: var(--lg-text-muted);
	font-family: inherit;
	font-size: 0.7rem;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.lg-bottom-nav__item:hover {
	color: var(--lg-text);
	text-decoration: none;
}

/* Inside, not around: an outline on an item flush against the screen edge is
   clipped on two sides, and the bar has no room to inset it. */
.lg-bottom-nav__item:focus-visible {
	outline: 2px solid var(--lg-red);
	outline-offset: -3px;
	border-radius: var(--lg-radius-sm);
}

.lg-bottom-nav__icon {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	flex: 0 0 auto;
}

/* Clipped rather than wrapped. A label that wraps makes the whole bar taller
   and moves every target on the screen; one that is cut off is only a label
   that is cut off, and the icon above it is still saying what the tab is. */
.lg-bottom-nav__label {
	display: block;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* The page you are on. Coral and a shade heavier - this is the one place in
   the bar where the brand colour means "here", not "do this", and there is no
   competing action inside the bar for it to be confused with. */
.lg-bottom-nav__item--active {
	color: var(--lg-red);
	font-weight: 600;
}

.lg-bottom-nav__item--active:hover {
	color: var(--lg-red);
}

/* --- How many sections fit ---------------------------------------------- */
/* SIX TABS IS THE CEILING: Home, four sections, More. Home and More are always
   there; the sections between them appear as the screen gets wide enough:

     up to 379px    3 sections   5 tabs   a 320px phone
     380px and up   4 sections   6 tabs   and that is as many as it ever shows

   A fifth section exists on most languages and it does not get a tab. Six
   targets across a phone is already about 60px each, and the seventh would
   take every one of them below the width of a thumb - so the fifth belongs in
   the More panel, which is what that panel is for.

   WHICH four is not the same question as which order they are in - see
   lg_bottom_nav_items(). The order is fixed; the slot number is the visitor's
   own priority, so the tabs that drop off are the sections that visitor does
   not open. Nothing moves sideways when the width changes: a tab either is
   there or is not.

   The active one is never hidden, whatever its slot - that is the one case
   where a fifth section does get a tab, because the bar must never hide the
   page it is standing on. Two classes beat one, so this needs no !important
   and no repeating inside the media query. */
.lg-bottom-nav__item--slot-4,
.lg-bottom-nav__item--overflow {
	display: none;
}

.lg-bottom-nav__item--slot-4.lg-bottom-nav__item--active,
.lg-bottom-nav__item--overflow.lg-bottom-nav__item--active {
	display: flex;
}

@media (min-width: 380px) {

	.lg-bottom-nav__item--slot-4 {
		display: flex;
	}
}

/* Six tabs on a 380px screen is about 63px each, and a word like "Vocabulary"
   does not fit that at 0.7rem. The label shrinks a step rather than the bar
   growing a line - the icons are what the thumb is aiming at, and the label is
   a reminder of what they mean. */
@media (min-width: 380px) and (max-width: 520px) {

	.lg-bottom-nav__label {
		font-size: 0.65rem;
		letter-spacing: -0.01em;
	}
}

/* --- Not wired up yet --------------------------------------------------- */
/* Off the tab order, unclickable, and paled so it reads as "not yet" rather
   than "broken". Today that is the More slot, which is in the bar so the
   layout is final while the panel behind it is still being built.

   Keyed off :disabled rather than a modifier class, so the look cannot drift
   from the behaviour - the renderer sets the attribute and the attribute is
   what paints it. A class could be applied to something still clickable, or
   left off something that is not.

   opacity rather than a paler colour: it takes the icon and the label down
   together by the same amount, and it goes on working if either of them is
   ever given a colour of its own. */
.lg-bottom-nav__item:disabled {
	opacity: 0.4;
	cursor: default;
}

/* :hover still matches a disabled button in several engines, so the hover rule
   further up would light this one back up on a device with a pointer. */
.lg-bottom-nav__item:disabled:hover {
	color: var(--lg-text-muted);
}

/* ---------------------------------------------------------------------------
   Room for it

   The bar is fixed, so it covers whatever the page ends with - a footer link,
   the last suggestion card, the CTA at the bottom of a result. Padding on the
   body is the only place this can go that every page inherits, and it has to be
   the bar's REAL height rather than a guess: the item, its 1px top border, and
   whatever the phone reserves below.

   The item is border-box (lg.core.css scopes that to every lg- element), so its
   min-height already includes its own padding - there is nothing to add for
   that.
   --------------------------------------------------------------------------- */
body {
	padding-bottom: calc(var(--lg-bottom-nav-height) + 1px + env(safe-area-inset-bottom, 0px));
}

/* 650px, and it is a.css:1254 that decides it, not this file.

   That is where .navigation goes back to display:block and the header stops
   being a burger - so it is the exact width at which the site already has a
   menu on screen. Two navigations at once is one too many, and a gap between
   them where a visitor has neither would be worse.

   At exactly 650px both of a.css's rules match and its min-width one wins, so
   the header menu is showing: this hides here too, on the same edge. */
@media (min-width: 650px) {

	.lg-bottom-nav {
		display: none;
	}

	/* And the padding goes with it, or every desktop page ends in 4rem of
	   nothing. */
	body {
		padding-bottom: 0;
	}
}

/* ===========================================================================
   lg-nav-sheet — everything the bar could not fit
   ---------------------------------------------------------------------------
   A sheet that rises from the foot of the screen when the More tab is pressed.
   Renderer and the twenty lines that open it: _components/lg-bottom-nav.php.

     .lg-nav-sheet                 the whole overlay, [hidden] when closed
       .lg-nav-sheet__scrim        the dimmed page behind, and a close target
       .lg-nav-sheet__panel
         .lg-nav-sheet__handle
         .lg-nav-sheet__head       title + close
         .lg-nav-sheet__grid
           a|button.lg-nav-sheet__tile

   MOBILE ONLY, like the bar it belongs to, and hidden at the same 650px.

   NO TINTED DISC BEHIND THE ICON. The draft has each icon in a coral circle;
   this draws them plain, in the page's own text colour. Six coral discs on one
   screen is more brand than a menu can carry, and it spends the accent colour
   on decoration in the one place it is needed for meaning - the active tab in
   the bar directly underneath.
   =========================================================================== */

/* IT STOPS AT THE BAR. bottom is the bar's height, so the sheet rises to sit
   ON it rather than over it: the five tabs stay visible and usable the whole
   time it is open, and More stays lit to say where the panel came from.

   That is also why the panel needs no safe-area padding of its own - the bar
   below it is already holding that space.

   z-index 7 is above the bar's 5, which matters at the seam: the panel's
   shadow falls on the bar rather than the bar's shadow falling on the panel. */
.lg-nav-sheet {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: calc(var(--lg-bottom-nav-height) + 1px + env(safe-area-inset-bottom, 0px));
	z-index: 7;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.lg-nav-sheet[hidden] {
	display: none;
}

/* Dimmed rather than opaque: the page stays visible behind, which is what says
   this is a layer over it and not a new page. */
.lg-nav-sheet__scrim {
	position: absolute;
	inset: 0;
	background-color: rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.35);
}

.lg-nav-sheet__panel {
	position: relative;
	width: 100%;
	max-width: 50rem;
	margin: 0 auto;
	padding: 0.65rem 1.1rem 1.4rem;
	border-radius: var(--lg-radius-card) var(--lg-radius-card) 0 0;
	background-color: var(--lg-surface);
	box-shadow: 0 -8px 30px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.18);
	/* Long enough to need it on a small screen in landscape. */
	max-height: 85vh;
	overflow-y: auto;
}

/* The grab bar. It does nothing - the sheet is not draggable - and it is here
   because it is the shape that says "this came up from the bottom and can go
   back down". aria-hidden in the markup for the same reason. */
.lg-nav-sheet__handle {
	width: 2.5rem;
	height: 0.25rem;
	margin: 0 auto 0.9rem;
	border-radius: 999px;
	background-color: var(--lg-border);
}

.lg-nav-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.1rem;
}

.lg-nav-sheet__title {
	margin: 0;
	color: var(--lg-text);
	font-family: var(--lg-font-heading);
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.2;
}

/* A circle, because it is the one control here that is not a destination -
   round against a grid of rounded rectangles reads as "dismiss" without a
   word. Quiet, so it never competes with the tiles. */
.lg-nav-sheet__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--lg-surface-alt);
	color: var(--lg-text-muted);
	cursor: pointer;
}

.lg-nav-sheet__close:hover {
	color: var(--lg-text);
}

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

.lg-nav-sheet__close svg {
	width: 1.1rem;
	height: 1.1rem;
}

/* Three across, as the draft draws it. auto-fit with a floor rather than a
   fixed 3, so a narrow phone drops to two instead of squeezing three tiles
   too tight to read. */
.lg-nav-sheet__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
	gap: 0.7rem;
}

.lg-nav-sheet__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 6rem;
	padding: 1rem 0.5rem;
	border: 1px solid var(--lg-border);
	border-radius: var(--lg-radius-card);
	background-color: var(--lg-surface);
	color: var(--lg-text);
	font-family: var(--lg-font);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.lg-nav-sheet__tile:hover {
	border-color: var(--lg-border-strong);
	box-shadow: 0 4px 12px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.08);
	color: var(--lg-text);
	text-decoration: none;
}

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

/* The icon, plain. No disc, no tint - it takes the tile's own colour, which is
   the page text colour and goes pale with the tile when one is disabled. */
.lg-nav-sheet__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
}

/* The icons carry .lg-bottom-nav__icon from the shared renderer, which sizes
   them for the bar. They are bigger here, and this has to outrank that: one
   class each, so the later rule wins - which is why this file is linked after
   nothing else touches it. Stated explicitly rather than relying on that. */
.lg-nav-sheet__icon .lg-bottom-nav__icon {
	width: 1.75rem;
	height: 1.75rem;
}

.lg-nav-sheet__label {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Not built yet. Same treatment and the same mechanism as the More tab was
   given: a real disabled attribute, paled with opacity so the icon and the
   label go together. Today that is Business English, Verbs, Statistics and
   Profile - see lg_nav_sheet_items() for why each one is off. */
.lg-nav-sheet__tile:disabled {
	opacity: 0.4;
	cursor: default;
}

.lg-nav-sheet__tile:disabled:hover {
	border-color: var(--lg-border);
	box-shadow: none;
}

/* The section that is in the bar from 380px is out of the sheet from 380px.
   The same number as the rule that puts it in the bar, twenty lines up, and
   deliberately in the same file: a section in both places at once, or in
   neither, is what happens when those two numbers are edited apart. */
@media (min-width: 380px) {

	.lg-nav-sheet__tile--slot-4 {
		display: none;
	}
}

/* The page behind does not scroll while the sheet is open. Without this a
   flick aimed at the tiles scrolls the article underneath and the sheet sits
   there over a page that has moved. */
body.lg-nav-sheet-open {
	overflow: hidden;
}

/* The same 650px as the bar. It has to be: the sheet is opened from the bar,
   so a width where one exists and the other does not is a panel that cannot be
   reached or a tab that opens nothing. */
@media (min-width: 650px) {

	.lg-nav-sheet {
		display: none;
	}
}