/* The differences between a drawing and a site. Nothing else belongs here.
 *
 * THIS FILE IS HAND WRITTEN, AND amla.css IS NOT
 *
 * amla.css is lifted from the contract by scripts/extract_design.py and a hand
 * edit there is wiped by the next run. So the handful of rules that exist only
 * because the live site is not a single HTML file live here, each one with the
 * reason it exists written beside it. If a rule in here is not a consequence of
 * that difference, it belongs in the contract instead.
 *
 * THE DIFFERENCE, IN ONE SENTENCE
 *
 * The contract is one page that swaps seventeen screens without leaving the
 * address, so every control in it is a <button> driven by a script. The live
 * site has real addresses, so those controls are <a href> and a search engine,
 * a screen reader and somebody with JavaScript off can all use them. The
 * contract's stylesheet selects `button`. These rules say the same things about
 * the anchors that replaced them.
 */

/* ---------------------------------------------------------------- the shell */

/* .nav > button in the contract. Same rules, same look, real links. */
.nav > a,
.nav > span {
	position: relative;
	padding: 9px 12px;
	border-radius: var(--amla-r);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--amla-ink-2);
	transition: all .18s var(--amla-e);
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}
.nav > a:hover { background: var(--amla-surface); color: var(--amla-ink); }
.nav > a[aria-current=page] { color: var(--amla-navy); }
.nav > a[aria-current=page]::after {
	content: "";
	position: absolute;
	left: 12px; right: 12px; bottom: 3px;
	height: 2px;
	border-radius: 2px;
	background: var(--amla-gold);
}

/* .brand was a button and is now a link. The anchor colour would otherwise win
   over the two spans inside it. */
.brand { color: inherit; text-decoration: none; }

/* .lang button in the contract. */
.lang a {
	display: inline-flex;
	align-items: center;
	padding: 0 12px;
	height: 28px;
	border-radius: var(--amla-r-pill);
	font-size: 12px;
	font-weight: 700;
	color: var(--amla-ink-3);
	text-decoration: none;
}
.lang a[aria-pressed=true] {
	background: var(--amla-surface);
	color: var(--amla-navy);
	box-shadow: var(--amla-sh-1);
}

/* .foot button in the contract. */
.foot a,
.foot span[data-soon] {
	display: block;
	color: #C3D0E4;
	font-size: 13.5px;
	padding: 6px 0;
	text-decoration: none;
}
.foot a:hover { color: #fff; }
.foot .brand { display: flex; }

/* .mega a in the contract, which is now a span until the sector pages exist. */
.mega span[data-soon] {
	display: block;
	padding: 11px 13px;
	border-radius: var(--amla-r);
	color: var(--amla-ink-2);
}
.mega span[data-soon] b { display: block; font-size: 13.5px; font-weight: 600; color: var(--amla-ink); }
.mega span[data-soon] span { display: block; font-size: 11.5px; color: var(--amla-ink-4); margin-top: 2px; }

/* --------------------------------------------------------- the rest of it */

/* The mega menu is real links now, not spans. */
.mega a b { display: block; font-size: 13.5px; font-weight: 600; color: var(--amla-ink); }
.mega a span { display: block; font-size: 11.5px; color: var(--amla-ink-4); margin-top: 2px; }

/* .cc and .st were buttons in the contract and are links here, so the two
   resets a button gets for free have to be said out loud. */
a.cc, a.st, a.row { text-decoration: none; color: inherit; display: block; }
a.row { display: flex; }
a.st { position: relative; }

/* The rail's items were buttons too. */
.rnav a {
	display: flex;
	align-items: center;
	gap: var(--amla-s3);
	padding: 10px 12px;
	border-radius: var(--amla-r);
	color: #A8B7D0;
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none;
	transition: all .18s var(--amla-e);
}
.rnav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.rnav a[aria-current=page] { background: var(--amla-gold); color: var(--amla-on-gold); font-weight: 600; }
.rnav a[aria-current=page] em { background: rgba(34,25,10,.18); }

/* A tag that is a link (the sector pills on the profile). */
a.tag { text-decoration: none; }

/* The accordion button is a real button and keeps the browser's own. */
.acc__q { width: 100%; }

/* A form on a card should not add its own spacing to the field rhythm. */
.card form { margin: 0; }

/* select and textarea are .input too, and neither inherits the family. */
select.input, textarea.input { font-family: inherit; }
textarea.input { resize: vertical; min-height: 96px; }

/* At phone width the profile's two columns become one, like every other grid. */
@media (max-width: 900px) {
	.amla-profile { grid-template-columns: 1fr !important; }
}

/* Four price cards whose feature lists are different lengths still put their
   four buttons on one line. Without this the eye reads the ragged bottom as
   four unrelated cards rather than one comparison. */
.amla-tier { display: flex; flex-direction: column; }
.amla-tier__go { margin-top: auto; }

/* THE COURSE CARD'S COVER, WHICH THE CONTRACT DRAWS AND NEVER SHOWS
 *
 * .cc__c is a <span> carrying aspect-ratio:16/9 and holding an absolutely
 * positioned SVG. An inline box ignores aspect-ratio and has no height, so the
 * cover collapses to nothing and every course card in the contract file renders
 * with its artwork missing. It is a layout bug in the drawing rather than a
 * decision: the stylesheet clearly intends a cover, because it positions the
 * SVG into one and puts the badges on top of it.
 *
 * One property fixes it. The job to correct it in the contract is on the board,
 * and when that lands this rule becomes a duplicate and comes out.
 */
.cc__c { display: block; }
.cc__badges { z-index: 1; }

/* Cards in a row are the same height because the grid says so, but their
   contents are different lengths, so the lesson count and the Explore arrow
   land at four different heights and the row reads as ragged. Pushing the
   footer down puts every one of them on one line. */
a.cc { display: flex; flex-direction: column; }
.cc__b { display: flex; flex-direction: column; flex: 1; }
.cc__f { margin-top: auto; }

/* A DRAWING THAT DOES NOT FILL ITS BOX
 *
 * The hero SVG is 1200x420 and carries no width or height, so outside .hero
 * (which sizes it) it falls back to its own ratio and leaves the rest of the
 * box empty. On the two auth screens that meant a full height navy panel with
 * the port drawn across the top quarter of it. The contract has the same shape
 * of gap; it is a sizing bug rather than a decision, because every one of these
 * boxes sets its own aspect-ratio and expects the art to take it. */
.amla-art svg { display: block; width: 100%; height: 100%; }

/* THE HINT UNDER A FIELD IS NOT A SECOND LABEL
 *
 * .field > span is the field's label: uppercase, letter-spaced, 11px. The hint
 * is also a direct child span, so it was being drawn as a second label, and
 * "You choose it, and nobody at AMLA can see it or set it for you" came out
 * shouting in small caps. It is a sentence and it reads as one. */
.field > span.hint {
	text-transform: none;
	letter-spacing: 0;
	font-size: 12px;
	font-weight: 500;
	color: var(--amla-ink-3);
	margin-top: 7px;
	margin-bottom: 0;
}

/* ---------------------------------------------------------- photographs */

/* A <picture> is an inline box with an <img> in it, and both have to be told
   to fill the shape they were put into, or the card keeps its 16:9 and the
   photograph sits in the top-left corner of it at its own size. */
.cc__c picture, .amla-shot picture { display: block; width: 100%; height: 100%; }
.cc__c img, .amla-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* THE HERO, WHICH IS A PHOTOGRAPH UNDER A NAVY VEIL
 *
 * Section 5.1 of the brief: full width aerial port at dawn, dark navy overlay.
 * The overlay is not decoration, it is what keeps white type legible over a
 * photograph nobody controls the contrast of. The drawing stays underneath, so
 * a hero whose photograph has not arrived is still a port and not a blank. */
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__art picture { position: absolute; inset: 0; display: block; }
.hero__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(8,32,63,.78) 0%,
		rgba(13,43,91,.62) 45%,
		rgba(8,32,63,.80) 100%);
}

/* The small thumbnails on the learner side are 66px wide and never larger. */
.thumb picture, .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* "14 lessons" is one phrase and must not break across two lines. The footer
   wraps as a whole when it has to; the parts of it do not. */
.cc__f { flex-wrap: wrap; row-gap: 4px; }
.cc__f > span { white-space: nowrap; }