/*
 * Our front-end CSS, all of it.
 *
 * One file and not two, because the child theme is not active on phones --
 * `td-mobile-plugin` swaps the theme entirely -- so `themes/geekdom/` reaches
 * desktop and tablet only. Anything that has to be true in both places can
 * only come from the plugin, which makes the plugin the place it all goes.
 *
 * Rules that belong to the phone alone are under `.geekdom-phone`, a class
 * this plugin puts on the body when the mobile theme is answering.
 */

/*
 * A block with nothing in it is not a heading.
 *
 * tagDiv draws the header and then an empty `.td_block_inner`, so a band with
 * no posts left a title and a hole under it -- and the first thing the expiry
 * rule did was make exactly that happen to Free Games on a day when nothing
 * was on offer. `:has()` reads the live DOM, so a block that gets filled later
 * comes back on its own rather than staying hidden.
 */
.td_block_wrap:has( > .td_block_inner:empty ) {
	display: none;
}

/*
 * The sponsor banners on a phone, brought down to a size a thumb can pass.
 *
 * They are posters sized for a 300px column and the phone gives them the full
 * width, so two of them and the Discord box came to a screen and a half before
 * the first article. Scaled down whole and never cropped: a banner is somebody
 * else's artwork, and the whole of it is the obligation.
 */
body.geekdom-phone .vc_widget_sidebar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 12px;
	box-sizing: border-box;

	/*
	 * A query container, so the banners answer to the width they are actually
	 * given rather than to the width of the screen. The two are not the same
	 * here -- this row is inset inside the page's own gutter -- and the row is
	 * the thing that has to hold them.
	 */
	container-type: inline-size;
}

body.geekdom-phone .vc_widget_sidebar > .widget {
	/*
	 * Two across, and the column width is what bounds the height -- a
	 * max-height would letterbox the taller of two posters against the other.
	 * `text-align` and not `margin: auto`: the image sits inside an <a>, which
	 * is inline and shrinks to the image, so centring the image centres it
	 * inside a box its own size and nothing moves. It was left-aligned for
	 * exactly that reason.
	 */
	/*
	 * 46 and not 50: two of them and a gap have to fit whatever the container
	 * turns out to be, and the container is a tagDiv wrapper whose width is
	 * not ours to predict. A `vw` cap was the first attempt and it put the
	 * second banner off the right edge -- the viewport and that wrapper are
	 * not the same width on a phone.
	 */
	/* Half the row each, less half the gap. */
	flex: 0 1 calc( 50% - 6px );
	max-width: calc( 50% - 6px );
	min-width: 0;
	box-sizing: border-box;
	margin-bottom: 0;
	text-align: center;
}

/* One banner on its own should not be half a row wide. */
body.geekdom-phone .vc_widget_sidebar > .widget:only-of-type {
	flex-basis: 70%;
	max-width: 70%;
}

/*
 * And on a narrow phone, one at a time.
 *
 * Two posters in a 300px row are about 140px each, which is below the width
 * at which the writing on them can be read -- and an unreadable banner is
 * worth nothing to the sponsor. Better one that works than two that do not.
 */
@container (max-width: 320px) {
	body.geekdom-phone .vc_widget_sidebar > .widget,
	body.geekdom-phone .vc_widget_sidebar > .widget:only-of-type {
		flex-basis: 100%;
		max-width: 100%;
	}
}

body.geekdom-phone .vc_widget_sidebar > .widget img {
	width: 100%;
	height: auto;
	display: block;
}

/*
 * The foot of the phone's page.
 *
 * Discord used to be hidden here outright -- a 500px member list above the
 * first article is a desktop thing to read. It is not hidden any more, it has
 * moved: its own widget area, drawn under the article list, where the length
 * costs nobody anything. Same widget, one place, two positions.
 */
.geekdom-phone-tail {
	margin-top: 24px;
}

.geekdom-phone-tail > .widget {
	margin-bottom: 24px;
}

/*
 * The Discord box across the whole width.
 *
 * Its iframe carries width="300" as an attribute, sized for the desktop
 * column it used to sit in; down here there is a whole screen and no reason
 * to leave two thirds of it empty.
 */
.geekdom-phone-tail iframe {
	width: 100%;
	max-width: 100%;
}

/*
 * And the same iframe, in a column narrower than it.
 *
 * `width="300"` was written for the right column it used to sit in. Under the
 * rail the column is a quarter of the page -- about 250px -- and 300 does not
 * fit: the widget was cut off down its right edge, members' names and all.
 * A maximum rather than a width, so a widget narrower than its column is left
 * where it is instead of being stretched.
 */
.vc_widget_sidebar iframe {
	max-width: 100%;
}

/*
 * The tail's headings, matched to the one above them.
 *
 * On the homepage a band's heading is the biggest thing in its row. Under an
 * article the neighbour is the theme's related-articles heading -- "Μπορεί να
 * σου αρέσουν" -- at 26px/800 in the body font, and two headings a screen
 * apart that disagree read as two different sites. The size comes from the
 * Cloud Library block's own per-instance CSS, so it is copied here rather
 * than shared; if that block is restyled, this is the one line to follow it.
 *
 * `!important` because the block it is copying uses it too: the Cloud Library
 * writes per-instance rules with `!important` on every one, and a plain
 * declaration of ours loses to the theme's own single-template CSS, which is
 * loaded after this file. Matched, not shouted over -- the values here are the
 * ones the related block computes to.
 */
.geekdom-article-tail .td-block-title,
.geekdom-article-tail .td-block-title a,
.geekdom-article-tail .td-block-title span {
	font-family: Roboto, var( --td_default_google_font_1, sans-serif ) !important;
	font-size: 26px !important;
	font-weight: 800 !important;
}

/*
 * And the chrome around it, which is the louder half of the difference.
 *
 * Our blocks take their heading from the theme's own `td_block_template_1`,
 * and that template is a white label on a dark box with a rule running out of
 * it. The Cloud Library block next to it is plain dark text on the page and
 * nothing else. Same words, same size, two different objects -- measured, the
 * box is a background and padding on the span and a 2px bottom border on the
 * heading, so those three are what come off.
 */
.geekdom-article-tail .td-block-title {
	border: 0 !important;
}

.geekdom-article-tail .td-block-title a,
.geekdom-article-tail .td-block-title span {
	display: block;
	padding: 0 !important;
	background: none !important;
	color: inherit !important;
	line-height: 1 !important;
}

/*
 * What follows an article.
 *
 * Set apart from the writing above it, because the reader has finished and
 * these are an offer rather than more of the same piece.
 */
.geekdom-article-tail {
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid rgba( 0, 0, 0, .1 );
}

.geekdom-article-tail > .gdblock + .gdblock,
.geekdom-article-tail > .td_block_wrap + .td_block_wrap {
	margin-top: 28px;
}

/*
 * Our blocks' headings, the size the site's headings are.
 *
 * Every section on the page is 28px/800 Fira Sans, and none of that comes
 * from a rule anything can inherit: tagDiv writes it inline, per block, out of
 * the `f_header_font_*` attributes in each shortcode. Our blocks do not take
 * those attributes, so theirs came out 17px Roboto -- the theme's default,
 * beside eight headings that are not.
 *
 * The three sizes are the ones the neighbours encode for the same
 * breakpoints, so this is the same heading and not a second opinion about
 * what a heading is.
 */
.gdblock .td-block-title,
.gdblock .td-block-title a,
.gdblock .td-block-title span {
	font-family: "Fira Sans", var( --td_default_google_font_1, sans-serif );
	font-size: 28px;
	font-weight: 800;
}

@media (max-width: 1140px) {
	.gdblock .td-block-title,
	.gdblock .td-block-title a,
	.gdblock .td-block-title span {
		font-size: 23px;
	}
}

@media (max-width: 1018px) {
	.gdblock .td-block-title,
	.gdblock .td-block-title a,
	.gdblock .td-block-title span {
		font-size: 20px;
	}
}