/* ==========================================================================
   Fresh Sheet — homepage newsletter pop-up (draft 3)
   Brief: Colin_Homepage_Popup_Dev_Brief.pdf, October 2026

   The custom properties below are the defaults. Appearance → Customize →
   Fresh Sheet Pop-up overrides them with an inline block on #fsp-overlay,
   which wins on specificity. Editing values here changes the fallback only.
   ========================================================================== */

.fsp-overlay {
	--fsp-charcoal: #646a6c;
	--fsp-teal: #0dbeb8;
	--fsp-pink: #ff3399;
	--fsp-link: #087f7a;
	--fsp-overlay-bg: rgba(0, 0, 0, 0);
	--fsp-max-width: 500px;

	/* "-base" values are the desktop ones; the mobile block derives from them. */
	--fsp-body-base: 16px;
	--fsp-brand-base: 19px;
	--fsp-charcoal-w-base: 16px;
	--fsp-teal-w-base: 4px;
	--fsp-gap-base: 11px;
	--fsp-sig-base: 100px;
	--fsp-pink-w: 2px;

	/* Resolved values - redeclared in the mobile block. */
	--fsp-body: var( --fsp-body-base );
	--fsp-brand: var( --fsp-brand-base );
	--fsp-charcoal-w: var( --fsp-charcoal-w-base );
	--fsp-teal-w: var( --fsp-teal-w-base );
	--fsp-gap: var( --fsp-gap-base );
	--fsp-sig: var( --fsp-sig-base );

	/*
	 * The white band between the charcoal and teal rules is the modal's
	 * padding; the one between the teal and pink rules is --fsp-gap. Those
	 * two are meant to stay equal, so pad is not a value of its own any
	 * more — it follows gap, on every breakpoint and whatever is set in
	 * the Customizer.
	 */
	--fsp-pad: var( --fsp-gap );

	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: var( --fsp-overlay-bg );
	opacity: 0;
	transition: opacity .28s ease;

	/*
	 * While fading out, the overlay is still display:flex and would swallow
	 * clicks meant for the page underneath. The [hidden] attribute that really
	 * removes it is set on a timer, and timers are throttled in background
	 * tabs, so that window is not reliably short. Only the open state accepts
	 * pointer input.
	 */
	pointer-events: none;
	-webkit-overflow-scrolling: touch;
	overflow-y: auto;
}

/*
 * The [hidden] attribute does the actual hiding, not visibility. Transitioning
 * visibility would leave the dialog unfocusable at the moment it opens, so the
 * close button could not take focus. Stated explicitly because Divi's reset
 * sets display on some generic selectors.
 */
.fsp-overlay[hidden] {
	display: none;
}

.fsp-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* Band 1: the thick charcoal border. Band 2 (white space) is the padding. */
.fsp-modal {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: var( --fsp-max-width );
	max-height: calc( 100vh - 40px );
	overflow-y: auto;
	border: var( --fsp-charcoal-w ) solid var( --fsp-charcoal );
	padding: var( --fsp-pad );
	background: #fff;
	font-family: Arial, Helvetica, sans-serif;
	transform: translateY( 12px ) scale( .98 );
	transition: transform .28s ease;
}

.fsp-overlay.is-open .fsp-modal {
	transform: none;
}

/* Band 3: teal rule. Band 4 (the white gap) is this element's padding. */
.fsp-frame-outer {
	border: var( --fsp-teal-w ) solid var( --fsp-teal );
	padding: var( --fsp-gap );
}

/* Band 5: pink rule. Band 6 (content area) is this element's padding. */
.fsp-frame-inner {
	border: var( --fsp-pink-w ) solid var( --fsp-pink );

	/*
	 * The top value is not decoration: it is the clearance the 44x44 close
	 * target needs. Trimming it is what makes the text collide with the x.
	 * The sides and bottom are free, and draft 3 tightens them.
	 */
	padding: 32px 20px 18px;
	text-align: center;
}

.fsp-text {
	margin: 0;
	padding: 0;
	color: #000;
	font-size: var( --fsp-body );
	line-height: 1.5;
}

/*
 * Draft 3: no space beyond the line-height between paragraphs. The white
 * space is deliberately kept out of the pop-up, and line-height 1.5 already
 * separates the lines.
 */
.fsp-text + .fsp-text {
	margin-top: 0;
}

/*
 * "It's free!" and "(Unsubscribe anytime.)" sit tight under the line above.
 * Redundant while the rule above is 0, kept so the intent survives if that
 * spacing is ever put back.
 */
.fsp-text--tight + .fsp-text,
.fsp-text + .fsp-text--tight {
	margin-top: 0;
}

/*
 * The heading reads as three lines on every screen:
 *
 *   Subscribe to
 *   Fresh Sheet, The Newsletter
 *   and get my latest reviews
 *
 * Making the lead and the link blocks forces exactly those two breaks. The
 * link is held to fit-content so only the words are clickable - a full-width
 * block would put a live link across the empty space either side of them.
 */
.fsp-lead {
	display: block;
}

/* The newsletter name - bold, a couple of points up from the body text. */
.fsp-brand {
	display: block;
	width: -webkit-fit-content;
	width: fit-content;
	margin: 0 auto;
	font-size: var( --fsp-brand );
	font-weight: 700;
	color: var( --fsp-link );
	text-decoration: underline;
}

.fsp-brand:hover,
.fsp-brand:focus-visible {
	text-decoration: underline;
}

/* "plus global arts coverage" - bold, italic and pink. */
.fsp-arts {
	font-weight: 700;
	font-style: italic;
	color: var( --fsp-pink );
}

.fsp-signature {
	display: block;
	width: var( --fsp-sig );
	height: auto;
	margin: 12px auto 0;
	color: #000;
}

/*
 * Close - 44x44 touch target per the brief.
 *
 * Sits inside the frame, top-right of the content area, as the approved
 * mock-up shows. The offset walks in through the same bands the frame is
 * built from, so it stays correct whatever thicknesses are set.
 */
.fsp-close {
	position: absolute;
	top: calc( var( --fsp-pad ) + var( --fsp-teal-w ) + var( --fsp-gap ) + var( --fsp-pink-w ) );
	right: calc( var( --fsp-pad ) + var( --fsp-teal-w ) + var( --fsp-gap ) + var( --fsp-pink-w ) );
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.fsp-close:hover {
	color: var( --fsp-pink );
}

.fsp-close:focus-visible {
	outline: 2px solid var( --fsp-link );
	outline-offset: -4px;
}

/*
 * The dialog takes focus when it opens (see the script). It is tabindex="-1",
 * so no keyboard user can ever land on it by tabbing and need a ring here —
 * the ring that matters is the one on .fsp-close above.
 */
.fsp-modal:focus {
	outline: none;
}

/* Divi styles buttons globally; keep those rules off this one. */
.fsp-close::before,
.fsp-close::after {
	display: none !important;
}

@media (max-width: 767px) {

	/* Everything scales off the desktop values set in the Customizer. */
	.fsp-overlay {
		--fsp-body: max( 10px, calc( var( --fsp-body-base ) - 1px ) );
		--fsp-brand: max( 11px, calc( var( --fsp-brand-base ) - 1px ) );
		--fsp-charcoal-w: max( 0px, calc( var( --fsp-charcoal-w-base ) - 6px ) );
		--fsp-teal-w: max( 0px, calc( var( --fsp-teal-w-base ) - 1px ) );
		--fsp-gap: max( 0px, calc( var( --fsp-gap-base ) - 3px ) );
		--fsp-sig: calc( var( --fsp-sig-base ) * .72 );

		/* Narrower margins on mobile. */
		padding: 10px;
	}

	.fsp-modal {
		max-width: 100%;
		max-height: calc( 100vh - 20px );
	}

	.fsp-frame-inner {
		padding: 28px 12px 14px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.fsp-overlay,
	.fsp-modal {
		transition: none;
	}

	.fsp-modal {
		transform: none;
	}
}