/* Header and footer corrections, layered over the shared stylesheets on cdn.sealzi.com.
 *
 * That file is shared with the other Sealzi sites, so fixes specific to this one
 * belong here rather than there. Load it after footer.css.
 */

/* Hovering a footer link changes its font-weight -- 300 to 600 for the links, 800
 * to 900 for the two headings. The link is an inline-block, the <ul> around it is
 * sized to its widest child, and footer .app_links positions the two columns with
 * justify-content: space-around, which works from their widths. So the 4px that
 * "Threat model" gains at 600 widened the link, then the ul, then the column, and
 * space-around then shifted BOTH columns to rebalance. Pointing at one link moved
 * every link in the footer.
 *
 * The fix reserves the bold width up front instead of changing what bold looks
 * like. Each anchor carries data-text with its own label; the ::after renders that
 * label at the hovered weight as a zero-height, hidden block. An inline-block is as
 * wide as its widest child, so the anchor is permanently the width it will need
 * when hovered -- and the real font-weight change then has nothing left to resize.
 *
 * The earlier attempt used -webkit-text-stroke to thicken the text in place. It
 * avoided the reflow but did not read as bold enough, and a stroke does spill
 * outside the glyph box, so it could still nudge neighbours.
 */

footer .app_links li a,
footer .app_links h3.app_links_title a {
	display: inline-block;
	/* vertical-align, because the ::after below is a BLOCK box inside this inline-block.
	   That moves the inline-block's baseline to its last in-flow line box, and baseline
	   alignment then adds the font's descender space beneath it -- 2.8px per row, which
	   is what made the link list taller than it used to be. Aligning to the middle takes
	   the anchor out of baseline alignment entirely: the row goes back to the ul's
	   line-height, and the reserved width is unaffected. */
	vertical-align: middle;
}

footer .app_links li a::after,
footer .app_links h3.app_links_title a::after {
	content: attr(data-text);
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
	/* Never let the reserving copy be the thing that wraps -- it has to measure the
	   label on one line to be worth anything. */
	white-space: nowrap;
}

/* Match each hover weight exactly, or the reservation is the wrong size. */
footer .app_links li a::after {
	font-weight: 600;
}

footer .app_links h3.app_links_title a::after {
	font-weight: 900;
}

/* ---------------------------------------------------------------------------
   Logo aspect ratio.

   The logo images carry width/height attributes so the browser can reserve their box
   before the file arrives. Those attributes also act as CSS width and height of last
   resort -- and the shared stylesheets size only one axis each (header: height 50px;
   footer: nothing, with flex squeezing the width). So the attribute supplied the other
   axis and overrode the image's 1:1 shape: 160x50 in the header, 75x160 in the footer.

   The fix is to free the axis the layout does not control, not to pin both -- pinning
   both also froze the footer logo at one size when it used to scale with the row.
   --------------------------------------------------------------------------- */

header .logos img {
	/* 50px is the shared header stylesheet's own value, restated here only so the
	   width attribute stops overriding the aspect ratio. Not a token of ours to put
	   on the x2 scale -- moving it would put this out of step with cdn.sealzi.com,
	   which is what actually lays the header out. */
	height: 50px;
	width: auto;
}

/* height: auto, and no width.
 *
 * The shared stylesheet sets no size on this logo at all -- the flex row in
 * .app_description .upper squeezes its width, and the height then follows from the
 * image's own aspect ratio. That is how it sized before, and it scales with the
 * viewport, so any fixed value here is wrong at most widths (65px shrank it).
 *
 * The height attribute is the problem to neutralise: width/height attributes act as CSS
 * dimensions of last resort, so height="160" held the box at 160px tall while flex
 * pulled the width down to 75px -- a 75x160 letterbox. auto lets the ratio win while
 * the attributes still reserve the right box before the file arrives. */
footer .app_description .upper a img {
	height: auto;
}

/* The footer tagline used to be an <h6> directly under the <h2>, a two-level heading
   skip that Lighthouse flags on every page -- and it was never a heading anyway, just
   small text under the name. It is a <p> now, styled to match what the h6 looked like.

   Also: larger hit areas for the footer links. At 14px with no padding they were well
   under the 24x24 minimum Lighthouse checks for, and they sit close together. */

footer .app_description .text .app_tagline {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
}

/* The footer column titles were <h4> directly under the footer's <h2> -- another
   two-level skip. They are <h3> now; these keep the h4 appearance the shared
   stylesheet gave them. */
footer .app_links h3.app_links_title {
	margin-bottom: 0;
	/* 1em resolved to exactly 16px here -- the parent sets 16px too -- so this is the
	   same size stated absolutely. */
	font-size: 16px;
	font-weight: 800;
	transition: 0.2s;
}

footer .app_links h3.app_links_title a {
	text-decoration: none;
	color: white;
	font-weight: 800;
}