/**
 * Subscribe form.
 *
 * Newspaper furniture, not a SaaS card: hairline rules, a real type scale and
 * one solid action. No panel, no radius pretending to be depth, no shadow.
 *
 * ---------------------------------------------------------------------------
 * SIZES ARE IN PIXELS, DELIBERATELY. DO NOT "MODERNISE" THEM TO rem.
 * ---------------------------------------------------------------------------
 * Fox sets `html { font-size: 62.5% }` — the old 10px-root trick — so 1rem is
 * TEN pixels here, not sixteen. A first pass at this file used rem on the
 * assumption of a 16px root and shipped a form whose submit button rendered at
 * 8.2px and whose legend rendered at 7.8px. It looked like fine print because
 * it was.
 *
 * em is no better: this form renders inside the 17.6px page column AND inside
 * a much smaller footer column, so em would make the same control two
 * different sizes. A control should be the same physical size wherever it
 * appears — the reader is doing the same job in both places.
 *
 * 16px on the inputs is a hard floor, not a preference: iOS Safari zooms the
 * whole viewport when a focused field is under 16px.
 *
 * ---------------------------------------------------------------------------
 * COLOUR. #02A0DB is BRAND and appears only as a rule or a mark; #027EAD is
 * INK, the only blue permitted under white text, because brand blue measures
 * 2.98:1 on white and fails WCAG AA at every size. See tools/setup/02-theme.php.
 *
 * TWO GROUNDS. Borders are drawn with currentColor at low alpha and text
 * inherits, so the chrome follows the light page column or the dark footer
 * band without a second ruleset that would drift.
 */

.ram-sub {
	--rg-ink: #027EAD;
	--rg-ink-hover: #015879;
	--rg-hair: color-mix(in srgb, currentColor 22%, transparent);
	--rg-chip: color-mix(in srgb, currentColor 38%, transparent);
	--rg-hair-strong: color-mix(in srgb, currentColor 45%, transparent);
	--rg-control-h: 46px;
	margin: 0;
}

/* ---------------------------------------------------------------- the form
 *
 * Two columns, three rows: the fields, then the choice and the action sharing
 * a baseline, then the consent note.
 *
 * The submit deliberately does NOT sit in a third column beside the email
 * field. Tried that: at a 660px measure the button was shunted to the far
 * right, floating a clear gap from the inputs and reading as unrelated. On row
 * 2 it stays inside the form's own block, next to the last decision it commits.
 */
.ram-sub__form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 10px;
	align-items: start;
}
.ram-sub__row { margin: 0; min-width: 0; }
.ram-sub__row--submit {
	grid-column: 2;
	justify-self: end;
	align-self: center;
}

.ram-sub__form input[type="text"],
.ram-sub__form input[type="email"] {
	width: 100%;
	min-height: var(--rg-control-h);
	padding: 11px 14px;
	border: 1px solid var(--rg-hair-strong);
	border-radius: 2px;
	background: #fff;
	color: #1b1b1b;
	font-family: inherit;
	font-size: 16px;          /* iOS zoom floor — see the header */
	line-height: 1.4;
	transition: border-color .16s ease;
}
.ram-sub__form input::placeholder {
	/* 4.6:1 on white. The habitual #999 is 2.8:1 and fails AA. */
	color: #6b6b6b;
	opacity: 1;
}
.ram-sub__form input:hover { border-color: currentColor; }
.ram-sub__form input:focus-visible,
.ram-sub__submit:focus-visible,
.ram-sub__pref input:focus-visible + span {
	outline: 2px solid var(--rg-ink);
	outline-offset: 2px;
}

.ram-sub__submit {
	/* Fox styles buttons with `line-height: 48px`, which on top of this
	   element's own padding produced a 72px button beside a 46px input. The
	   explicit line-height and centring are what keep the two aligned; do not
	   drop them assuming the padding alone controls the height. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--rg-control-h);
	padding: 11px 26px;
	border: 1px solid transparent;
	border-radius: 2px;
	background: var(--rg-ink);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .16s ease;
}
.ram-sub__submit:hover { background: var(--rg-ink-hover); }
.ram-sub__submit[disabled] { opacity: .6; cursor: default; }

/* ------------------------------------------------- language preference pair
 *
 * A segmented pair rather than a dropdown: two options do not deserve a menu,
 * and both labels stay readable at once — which matters when one of them is in
 * a script the reader may be hunting for precisely because they cannot read
 * the other.
 */
.ram-sub__pref {
	grid-column: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
	padding: 0;
	border: 0;
}
.ram-sub__pref-legend {
	padding: 0;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .75;
}
.ram-sub__pref-opt { display: inline-flex; cursor: pointer; }
.ram-sub__pref-opt input {
	position: absolute;
	width: 1px; height: 1px;
	opacity: 0;
	pointer-events: none;
}
.ram-sub__pref-opt span {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 6px 16px;
	border: 1px solid var(--rg-chip);
	border-radius: 2px;
	font-size: 15px;
	line-height: 1.35;
	transition: border-color .16s ease, background-color .16s ease;
}
.ram-sub__pref-opt:hover span { border-color: var(--rg-hair-strong); }
.ram-sub__pref-opt input:checked + span {
	border-color: var(--rg-ink);
	background: var(--rg-ink);
	color: #fff;
	font-weight: 600;
}

/* ------------------------------------------------------------- consent note */

.ram-sub__consent {
	grid-column: 1 / -1;
	margin: 2px 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	opacity: .75;
}

/* -------------------------------------------------------------------- honeypot
 * Unreachable by pointer, keyboard AND assistive tech. Positioned off-canvas
 * rather than display:none, which some form-fillers specifically test for. */
.ram-sub__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px; overflow: hidden;
}

/* --------------------------------------------------------------- the notices
 * A hairline above and open space — NOT a thick coloured left bar, which is
 * the tell of a generic admin alert and belongs to no newspaper. */
.ram-sub__notice {
	margin: 0 0 16px;
	padding: 14px 0 0;
	border-top: 2px solid var(--rg-ink);
	font-size: 15px;
	line-height: 1.6;
}
.ram-sub__notice--err { border-top-color: #a23a2a; }

/* ------------------------------------------------------ the page-column form
 * On the Subscribe page the form sits in the 660px article measure, so it can
 * afford to breathe and to be set off from the prose above it. */
.ram-sub:not(.ram-sub--compact) {
	margin: 30px 0 36px;
	padding: 26px 0 0;
	border-top: 1px solid var(--rg-hair);
}

/* ---------------------------------------------------------------- compact
 * The homepage rail and the dark footer column: one narrow stack.
 *
 * The CONTROLS do not shrink here. Only the surrounding prose does — the same
 * input doing the same job should not be harder to hit because of where the
 * widget was placed. This is where the first version went wrong twice over.
 */
.ram-sub--compact .ram-sub__form { grid-template-columns: 1fr; gap: 10px; }
.ram-sub--compact .ram-sub__row--submit { grid-column: 1; justify-self: stretch; }
.ram-sub--compact .ram-sub__pref { grid-column: 1; margin-top: 2px; }
.ram-sub--compact .ram-sub__submit { width: 100%; }
.ram-sub--compact .ram-sub__pref-legend { font-size: 12px; }
.ram-sub--compact .ram-sub__consent { font-size: 12.5px; line-height: 1.5; }

/* ----------------------------------------------------------------- responsive */
@media (max-width: 720px) {
	.ram-sub__form { grid-template-columns: 1fr; }
	.ram-sub__row--submit { grid-column: 1; justify-self: stretch; }
	.ram-sub__pref { grid-column: 1; }
	.ram-sub__submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.ram-sub__form input,
	.ram-sub__submit,
	.ram-sub__pref-opt span { transition: none; }
}

/* =====================================================================
   The outcome dialog
   =====================================================================

   Shown when the page carries ?subscribed=… — most importantly after the
   reader clicks the confirmation link in their email and lands on the
   homepage, where the inline notice sits 59% of the way down the document
   and is never seen.

   EVERY SIZE IS IN px, DELIBERATELY. Fox sets `html { font-size: 62.5% }`,
   so a rem here renders at 62.5% of its apparent value — the bug that once
   put the subscribe button at 8.2px. Do not "modernise" these to rem.

   Colours come from the paper's own theme mods: #02A0DB is the masthead
   blue, #10122F the dark band navy. Fonts come from the theme's variables,
   which already carry the Noto Armenian fallbacks, so the Armenian strings
   render correctly without this file knowing anything about Armenian.
   ================================================================== */

.rg-outcome{
	position:fixed; inset:0; z-index:100000;
	display:flex; align-items:center; justify-content:center;
	padding:20px;
}
.rg-outcome[hidden]{ display:none; }

.rg-outcome__scrim{
	position:absolute; inset:0;
	background:rgba(16,18,47,.62);
	-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
	display:block;
}

.rg-outcome__panel{
	position:relative;
	width:100%; max-width:430px;
	background:#fff;
	border-radius:4px;
	/* A slab of accent along the top edge rather than a coloured border all
	   round: the masthead uses the same device, so the dialog reads as part
	   of the paper instead of as a generic alert box. */
	border-top:3px solid #02A0DB;
	box-shadow:0 24px 60px -20px rgba(16,18,47,.55), 0 2px 8px rgba(16,18,47,.12);
	padding:34px 32px 30px;
	text-align:center;
}
.rg-outcome[data-state="expired"] .rg-outcome__panel,
.rg-outcome[data-state="error"]   .rg-outcome__panel{ border-top-color:#B4462C; }

.rg-outcome__x{
	position:absolute; top:6px; right:10px;
	font-size:26px; line-height:1;
	color:#9A9A9A; text-decoration:none;
	padding:8px 10px;
	border-radius:3px;
}
.rg-outcome__x:hover,.rg-outcome__x:focus{ color:#10122F; background:#F2F4F6; }

.rg-outcome__mark{
	display:inline-flex; align-items:center; justify-content:center;
	width:52px; height:52px; border-radius:50%;
	margin-bottom:16px;
}
.rg-outcome__mark--ok  { background:#E4F4FB; color:#027EAD; }
.rg-outcome__mark--warn{ background:#F8E9E5; color:#B4462C; }

.rg-outcome__title{
	font-family:var(--ram-font-heading,var(--font-heading,Georgia,serif));
	font-size:23px; line-height:1.22; font-weight:600;
	color:#10122F;
	margin:0 0 10px;
}
.rg-outcome__body{
	font-family:var(--ram-font-body,var(--font-body,system-ui,sans-serif));
	font-size:15px; line-height:1.6; color:#4A4A55;
	margin:0 auto; max-width:34em;
}
.rg-outcome__detail{
	font-family:var(--ram-font-body,var(--font-body,system-ui,sans-serif));
	font-size:13.5px; line-height:1.5; color:#8A8A94;
	margin:10px 0 0;
}

.rg-outcome__btn{
	display:inline-block; margin-top:22px;
	font-family:var(--ram-font-nav,var(--font-nav,system-ui,sans-serif));
	font-size:14px; font-weight:600; letter-spacing:.02em;
	/* line-height explicit: Fox sets 48px on buttons globally, which would
	   make this 72px tall next to nothing. */
	line-height:1.2;
	padding:13px 26px;
	background:#02A0DB; color:#fff; text-decoration:none;
	border-radius:3px;
	transition:background .15s ease;
}
.rg-outcome__btn:hover,.rg-outcome__btn:focus{ background:#015879; color:#fff; }
.rg-outcome__btn:focus-visible,
.rg-outcome__x:focus-visible{ outline:2px solid #10122F; outline-offset:2px; }

@media (max-width:480px){
	.rg-outcome{ padding:14px; }
	.rg-outcome__panel{ padding:28px 22px 24px; }
	.rg-outcome__title{ font-size:20px; }
	.rg-outcome__body{ font-size:14.5px; }
	.rg-outcome__btn{ display:block; width:100%; }
}

@media (prefers-reduced-motion:no-preference){
	.rg-outcome__panel{ animation:rg-outcome-in .22s cubic-bezier(.2,.7,.2,1) both; }
	@keyframes rg-outcome-in{ from{ opacity:0; transform:translateY(10px) scale(.985); } }
}
@media print{ .rg-outcome{ display:none; } }