/* StudyKit footer layout.
 *
 * This exists for one bug and a little tidying. It is deliberately small.
 *
 * The bug: the footer sat 264px to the left of centre on a wide screen.
 *
 * The theme wraps each footer widget in an unclassed flex row inside
 * .ct-container. A flex item whose width is auto is sized to its max-content
 * and packed against the start of the main axis, so the values footer came out
 * 1200px wide and hard against the left edge of a 1728px container. Its own
 * markup already asked for the right thing, max-width:1200px with margin:0
 * auto, but auto margins only distribute leftover space, and there was no
 * leftover space to distribute because the box was already flush left inside a
 * row that was 1728px wide.
 *
 * 1728 - 1200 = 528, and half of that is the 264px it appeared to be shifted
 * by. Measured, not guessed: at a 1900px viewport the widget's centre sat
 * -264px from the viewport centre, and the header container beside it sat at
 * exactly 0. The widget's CSS was never wrong. It just had nowhere to centre
 * within.
 *
 * The fix is to give it room to centre in: width:100% makes the widget fill the
 * flex row, and the margin:0 auto already in the markup does the rest.
 */

/* ---------------------------------------------------------------- *
 * 1. Centre the values footer
 * ---------------------------------------------------------------- *
 *
 * :has() is what keeps this off the other footer widgets, which are also plain
 * .ct-widget blocks and must be left alone. It is a hard requirement for this
 * rule, not a nicety: without it the selector cannot tell the values footer
 * from any other widget block. Where :has() is unsupported the rule is dropped
 * and the footer returns to its previous, left-aligned layout, which is a
 * cosmetic regression rather than a broken page. */
#footer .ct-widget:has(.studykit-values-footer-container) {
	width: 100%;
	max-width: none;
}

/* ---------------------------------------------------------------- *
 * 2. The copyright and legal bar
 * ---------------------------------------------------------------- *
 *
 * One paragraph holding the copyright, seven links and six bullet separators.
 * It wraps by default, and when it does the separators end up stranded at the
 * start of lines or pushed onto a line of their own, which reads as broken
 * rather than as a wrapped list.
 *
 * The line-height does the work: 2.2 gives each link a full line box, so a
 * separator that lands at a line break still has room above and below it. The
 * separator margins come down on narrow screens so the links are not pushed
 * apart by more whitespace than the text itself occupies. */
.studykit-copyright-bar p {
	line-height: 2.2;
	overflow-wrap: break-word;
}

.footer-divider {
	margin: 0 6px;
}

@media (max-width: 680px) {
	.footer-divider {
		margin: 0 3px;
	}

	.studykit-copyright-bar p {
		font-size: 12.5px;
		line-height: 2.4;
	}

	/* Clearance for the theme's fixed back-to-top button.
	 *
	 * It sits 25px from the right edge and 25px from the bottom of the viewport,
	 * 36px square. On a narrow screen the legal bar wraps to fill nearly the
	 * whole width, so at the end of the scroll the button lands on the last line
	 * and covers the tail of "Privacy Policy": the link ends at x=318 and the
	 * button starts at x=299, measured at a 360px viewport.
	 *
	 * Bottom padding on the bar is the fix rather than moving the button, which
	 * is the theme's and is positioned correctly for every other page. The gap
	 * only has to clear the button plus its own offset. */
	.studykit-copyright-bar {
		padding-top: 12px;
		padding-bottom: 56px;
	}
}

/* ---------------------------------------------------------------- *
 * 3. Tablet: a real two-column grid
 * ---------------------------------------------------------------- *
 *
 * Between roughly 680px and 990px the row has four 180px-minimum items and a
 * 250px-minimum callout to place in a box that is not wide enough for all five.
 * Left to flex-wrap it breaks three-then-two, which leaves the fourth item
 * stranded beside a gap and stretches the first row to the height of its
 * longest paragraph. Measured at 768px: three items on the first row, two on
 * the second, with the callout sitting next to a single item and a visible hole
 * where the fifth would have gone.
 *
 * A two-column grid puts the four features in a 2x2 block and gives the callout
 * the full width underneath, which is what the eye expects from a row of this
 * shape.
 *
 * Every selector here is scoped to #footer on purpose. The footer widget carries
 * its own <style> block in the page body, which lands after a linked stylesheet
 * in document order, so an unscoped rule of equal specificity would lose to it
 * and this would silently do nothing. */
@media (min-width: 681px) and (max-width: 990px) {
	#footer .studykit-features-row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 32px;
		align-items: start;
	}

	#footer .feature-bar-item {
		flex: none;
	}

	#footer .feature-share-box {
		grid-column: 1 / -1;
		min-width: 0;
	}
}

/* ---------------------------------------------------------------- *
 * 4. Narrow-screen padding
 * ---------------------------------------------------------------- *
 *
 * The content box carries 20px of side padding at every width, which on a
 * 360px screen is a fifth of the width spent on air. The feature row's icons
 * are 38px and its text is 12px, so there is no reason to hold the larger
 * gutter once the screen is that narrow. */
@media (max-width: 420px) {
	.studykit-values-footer-content {
		padding: 22px 14px 18px;
	}

	.feature-bar-item {
		gap: 10px;
	}

	.feature-share-box {
		padding: 10px 14px;
	}
}

/* ---------------------------------------------------------------- *
 * 5. Overflow guard
 * ---------------------------------------------------------------- *
 *
 * The feature row holds a 250px-minimum callout box. Below about 300px of
 * usable width that minimum is wider than the space available, and a flex item
 * that cannot shrink below its min-width pushes the row into a horizontal
 * scroll for the whole page. Only reachable on a very narrow screen, and it
 * costs one rule to make it impossible. */
@media (max-width: 360px) {
	.feature-share-box {
		min-width: 0;
	}

	.feature-bar-icon-wrapper {
		width: 32px;
		height: 32px;
		flex-shrink: 0;
	}

	.share-heart {
		font-size: 20px;
	}
}

/* ---------------------------------------------------------------- *
 * 6. The empty row above the footer
 * ---------------------------------------------------------------- *
 *
 * The theme renders a top row whose only column is an empty ghost. It measures
 * 60px tall on every viewport and contains nothing at any of them, so it is pure
 * gap between the last of the page and the footer.
 *
 * The rule keys off the ghost actually being empty rather than off the row's
 * name, so a widget placed in that row later brings it back on its own. */
#footer [data-row="top"]:has([data-column="ghost"]:empty) {
  display: none;
}

/* ---------------------------------------------------------------- *
 * 7. A defined grid for the desktop feature row
 * ---------------------------------------------------------------- *
 *
 * The row is flexbox with flex: 1 1 180px on every item, which promises equal
 * widths and equal heights but does not deliver equal heights: the row measured
 * 79 / 106 / 158 / 106 / 75 at 1440px, so the icons and titles sat at four
 * different heights across it. Four 1fr cells plus one wider cell for the share
 * box gives each cell the same height, and each item already centres its icon
 * inside itself, so the row lines up without touching the item styles.
 *
 * Tablet already did this, from section 3 above. Desktop was the case that had
 * been missed. */
@media (min-width: 991px) {
  #footer .studykit-features-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(260px, 2fr);
    gap: 20px 25px;
    align-items: stretch;
  }

  #footer .feature-bar-item {
    flex: none;
  }
}

/* Five stacked cards is what made the mobile footer 783px. The gap between them
 * is set to 20px inside the widget's own style block; trimming it here takes
 * 24px off without shortening any text. */
@media (max-width: 680px) {
  #footer .studykit-features-row {
    gap: 14px;
  }
}