/* ---------------------------------------------------------------------------
   "İngiltere'den sertifika" — the promotional dialog on the Eğitimler section: the
   landing page (109) and the seven /egitim/ course pages its grid links to. Which routes,
   and why those, is recorded in igsa-core/inc/egitimler-popup.php; this file is the design
   and is identical on all eight.

   Reconstructed from the two reference renderings supplied by the owner
   (desktop-ing-sert.png, mobil-ing-sert.png). Measuring both showed they are the
   SAME composition at two scales — every element's share of the panel width
   agrees between them to within 1.5%:

                     desktop (954px panel)   phone (394px panel)
     headline width        92.3%                  94.1%
     flag left / width     27.9% / 25.4%          27.9% / 25.8%
     logo left / width     59.9% / 12.4%          60.5% / 12.6%
     close button          5.45% of panel width   5.41%

   So there is one layout here, not two, and it is expressed as fractions of a
   single custom property: `--pw`, the panel's width. Every dimension below is
   `calc(var(--pw) * k)` with k taken from the table above. Nothing needs a media
   query and the composition is identical at 320px and at 1920px.

   `--pw` itself is clamped four ways:
     92vw            the phone reference's own share of the viewport
     100vw - 48px    keeps a >=24px margin each side, which is what lets the close
                     button's 44px touch target sit on the panel's corner without
                     any part of it leaving the viewport
     960px           the desktop reference is 954px at 1280 wide; past that the
                     card would only get bigger for no reason
     86vh * 2.29     the only clamp that binds in landscape, where height, not
                     width, is the scarce axis (932x430 -> 847px, not 857px)

   The headline is live text, not a picture of text, in Poppins Bold. Which face was
   not a guess: fourteen candidate display faces plus every face this theme ships were
   rendered IN CHROMIUM against the reference's own ink mask, each with its tracking
   fitted so only glyph shape and weight could differ, and scored by
   intersection-over-union. Poppins Bold won on both shape (0.600) and weight (ink fill
   0.405 against the artwork's 0.400). The @font-face note below records why that face
   had to be added rather than taken from the theme.

   `font-size` and `letter-spacing` are then fitted to put that face on the artwork's
   own ink box — 93.2% of the panel wide, 11.64% of it tall — rather than picked.

   The <dialog> is a transparent full-viewport box and the card is its child, rather
   than the dialog being the card itself. That is deliberate: styling `position` on
   a modal <dialog> overrides the UA rule that centres it, and `inset:0; margin:auto`
   with `aspect-ratio` lands in the over-constrained case of CSS 2.1 10.6.4. A flex
   box with the card inside is centred by rules this stylesheet states outright, and
   its `overflow: hidden` is also what guarantees nothing inside the dialog can ever
   add to the document's scroll width.
   ------------------------------------------------------------------------ */

/* The headline face, subset to the 26 characters the headline uses — 1,668 bytes, and
   requested only on the pages that carry the card.

   It is here because the site does NOT have a bold Poppins, despite appearing to. The
   theme declares `font-family: Poppins; font-weight: 700` from
   assets/fonts/poppins-v5-bold.woff2, but that file's `l` stem is 0.0910em, byte for byte
   the same as poppins-400-latin.woff2, and its OS/2 usWeightClass is 400: it is a Regular
   mislabelled as a Bold. Rendered, it is LIGHTER than the site's own 400 face (ink fill
   0.206 against 0.215). Every face the theme ships was rendered against the reference
   artwork's own ink mask before adding this one — Rubik at 600/700/800/900, MetaPlus Bold,
   Poppins 200/400/500/600 and the mislabelled 700 — and the best of them scored 0.572
   against real Poppins Bold's 0.600, with only real Poppins Bold matching the artwork's
   weight (ink fill 0.405 against the reference's 0.400).

   The family is named IGSA Promo Display, NOT Poppins. @font-face is document-global, so
   redeclaring `Poppins`/700 here would silently repaint every bold Poppins element on
   /egitimler/ — the site's typography is not this task's to change.

   Poppins v4.004, (c) 2020 The Poppins Project Authors, SIL Open Font License 1.1
   (https://scripts.sil.org/OFL) — the same licence under which the theme already
   self-hosts the rest of the family. */
@font-face {
	font-family: "IGSA Promo Display";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("poppins-700-promo.woff2") format("woff2");
}

.igsa-promo {
	/* Panel width drives every dimension inside the card. */
	--pw: min(92vw, 100vw - 48px, 960px, 86vh * 2.29);
	/* Sampled from the reference artwork. */
	--promo-panel: #b2b3b3;
	--promo-fill: #df4304;
	--promo-ink: #032b7f;
	--promo-close: #f46600;
	--promo-btn: clamp(22px, var(--pw) * 0.0545, 52px);

	position: fixed;
	inset: 0;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	/* The site already has an overlay treatment — the navigation block's phone menu
	   uses `rgba(29, 29, 54, 0.6)`, the site's navy at 60% — so this is that same
	   scrim rather than a second, different one. The reference screenshots' white and
	   black surrounds are the artwork's own canvas, not a backdrop, and are not
	   reproduced. Painted on the element rather than on ::backdrop so it looks the
	   same whether the dialog was opened modally or not. */
	background: rgba(29, 29, 54, 0.6);
	display: none;
}

.igsa-promo[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.igsa-promo::backdrop {
	background: transparent;
}

/* ------------------------------------------------------------------- the card */

.igsa-promo__panel {
	position: relative;
	box-sizing: border-box;
	flex: 0 0 auto;
	width: var(--pw);
	aspect-ratio: 2.29;
	background: var(--promo-panel);
	color: var(--promo-fill);
}

@media (prefers-reduced-motion: no-preference) {
	.igsa-promo[open] .igsa-promo__panel {
		animation: igsa-promo-in 180ms ease-out both;
	}
	@keyframes igsa-promo-in {
		from { opacity: 0; transform: translateY(10px); }
		to   { opacity: 1; transform: none; }
	}
}

/* --------------------------------------------------------------- the headline */

.igsa-promo__title {
	position: absolute;
	left: calc(var(--pw) * 0.034);
	right: calc(var(--pw) * 0.034);
	top: calc(var(--pw) * 0.0347);
	margin: 0;
	font-family: "IGSA Promo Display", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 700;
	/* These constants are fitted, not chosen: the artwork's headline is 93.2% of the panel
	   wide and 11.64% of it tall (ink, keyline included), and these are the size, tracking
	   and word space that put Poppins Bold on exactly that box. */
	font-size: calc(var(--pw) * 0.10521);
	line-height: 1;
	letter-spacing: -0.1013em;
	/* letter-spacing shrinks the word space along with everything else, and measured
	   against the artwork that mattered: the gap before "sertifika" is 2.0% of the panel
	   in both references and was 0.8% here, so the two words nearly touched. This puts it
	   back, and the tracking above is re-fitted to keep the headline on the same box. */
	word-spacing: 0.114em;
	text-align: center;
	text-transform: lowercase;
	white-space: nowrap;
	color: var(--promo-fill);
	/* The artwork's navy keyline measures 1.5-2px against a headline whose ink is 110px
	   tall. `-webkit-text-stroke` centres its stroke on the glyph edge and `paint-order`
	   then lays the fill back over the inner half, so the visible outside edge is HALF the
	   declared width: 0.035em on this 101px headline paints 1.77px, which is the artwork.
	   Without `paint-order` (no current browser) the glyphs would simply thin by 1.77px
	   and still carry an outline. */
	paint-order: stroke fill;
	-webkit-text-stroke: 0.035em var(--promo-ink);
}

/* ------------------------------------------------------------ flag + LAAD mark */

.igsa-promo__row {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--pw) * 0.282); /* the reference centres both marks on this line */
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--pw) * 0.067);
}

.igsa-promo__flag {
	display: block;
	width: calc(var(--pw) * 0.256);
	height: auto;
	aspect-ratio: 2 / 1;
}

.igsa-promo__logo {
	display: block;
	width: calc(var(--pw) * 0.125);
	height: auto;
}

/* --------------------------------------------------------------- close button */

.igsa-promo__close {
	position: absolute;
	top: 0;
	right: 0;
	/* Centred on the card's top-right corner, which is where both references put it. */
	transform: translate(50%, -50%);
	/* The disc follows the artwork (5.45% of the card, so 22px on a phone), but the
	   BUTTON is never smaller than 44px so the touch target clears WCAG 2.5.5 and the
	   44px floor tools/mobile/verify.mjs asserts on every control on the page. The
	   `100vw - 48px` term in --pw is what keeps that 44px box inside the viewport. */
	width: max(44px, var(--promo-btn));
	height: max(44px, var(--promo-btn));
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.igsa-promo__close::before {
	content: "";
	position: absolute;
	width: var(--promo-btn);
	height: var(--promo-btn);
	border-radius: 50%;
	background: var(--promo-close);
}

.igsa-promo__close svg {
	position: relative; /* over the disc */
	display: block;
	width: calc(var(--promo-btn) * 0.365);
	height: calc(var(--promo-btn) * 0.519);
}

/* theme.css line 43 rings every button on the site on :focus-visible, with
   `box-shadow: 0 0 0 1px #fff, 0 0 0 3px #116dff` — the source's own indicator — and its
   comment says "Programmatic .focus() does NOT reproduce this: the ring only appears under
   real keyboard focus".

   On this button it does. `showModal()` moves focus here on page load with no user action
   at all, and Chrome counts that as focus-visible, so the card opened with a blue ring
   already drawn around its close button — measured in the preview, not assumed. The ring
   is therefore suppressed on plain :focus and restored, in the site's own colours and
   hugging the orange disc rather than the 44px hit box, once a11y.js has flagged
   `igsa-kbdnav` on <html> at the first Tab or arrow key. Keyboard users get the site's
   indicator; someone who has only opened the page gets none. */
.igsa-promo__close:focus { outline: none; box-shadow: none; }
.igsa-kbdnav .igsa-promo__close:focus-visible::before {
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #116dff;
}