/* IACH Access Control - gate overlay. Shared by the plugin and the localhost mockup (gate.html).
   Palette/type = the IACH 2026 site (Hanken Grotesk, red #F03F39, black #131417). No backdrop-filter anywhere. */

:root {
	--iach-ac-red: #F03F39;
	--iach-ac-black: #131417;
	--iach-ac-orange: #FF7C46;
	--iach-ac-dark-red: #54010E;
	--iach-ac-gray-300: #EBEBEB;
	--iach-ac-gray-400: #D0D0D1;
	--iach-ac-gray-500: #939393;
	--iach-ac-gray-600: #656565;
	--iach-ac-gray-700: #393A3C;
	--iach-ac-gray-800: #2B2C2F;
	--iach-ac-pink: #FEECEB;
	--iach-ac-font: 'Hanken Grotesk', 'Segoe UI', Arial, sans-serif;
	--iach-ac-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
}

/* ---- Page state (set on <html> by the inline head script, before first paint) ---- */
html.iach-ac-verified #iach-ac-overlay { display: none !important; }
html.iach-ac-locked, html.iach-ac-locked body { overflow: hidden !important; }
/* Fail closed: until the browser knows the visitor is verified, the page itself is not shown.
   Only the overlay (a descendant of body) makes itself visible again. */
html:not(.iach-ac-verified) body { visibility: hidden; }
html:not(.iach-ac-verified) #iach-ac-overlay { visibility: visible; }

/* ---- Overlay ---- */
.iach-ac-overlay {
	position: fixed; inset: 0; z-index: 2147483000;
	display: flex; align-items: center; justify-content: center;
	padding: 24px; box-sizing: border-box;
	font-family: var(--iach-ac-font); color: var(--iach-ac-black); line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	animation: iach-ac-fade .25s ease both;
}
.iach-ac-overlay *, .iach-ac-overlay *::before, .iach-ac-overlay *::after { box-sizing: border-box; }

.iach-ac-backdrop {
	position: absolute; inset: 0;
	background-image: url("../images/backdrop.jpg"), linear-gradient(163deg, #1B0B0C 5.67%, #54010E 22.75%, #F03F39 56.9%, #FF7C46 97.98%);
	background-size: cover; background-position: center bottom; background-repeat: no-repeat;
}

/* ---- Card ---- */
.iach-ac-card {
	position: relative; z-index: 1;
	display: flex; width: 100%; max-width: 960px; min-height: 560px;
	background: #fff; border-radius: 24px; overflow: hidden;
	box-shadow: 0 24px 80px rgba(19, 20, 23, .38);
	animation: iach-ac-pop .4s var(--iach-ac-spring) both; animation-delay: .06s;
}

/* ---- Left: inset photo ---- */
.iach-ac-visual { flex: 0 0 42%; padding: 16px 0 16px 16px; }
.iach-ac-visual-inner { position: relative; height: 100%; border-radius: 16px; overflow: hidden; background: var(--iach-ac-gray-800); }
.iach-ac-visual-inner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0; }
.iach-ac-visual-inner::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to top, rgba(19, 20, 23, .84) 0%, rgba(19, 20, 23, .38) 38%, rgba(19, 20, 23, 0) 66%);
}
.iach-ac-caption {
	position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 1;
	display: flex; flex-direction: column; gap: 6px; color: #fff;
}
.iach-ac-caption-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--iach-ac-orange); }
.iach-ac-caption-title { font-size: 20px; font-weight: 700; line-height: 1.25; }
.iach-ac-caption-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .85); }
.iach-ac-caption-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: .7; }

/* ---- Right: form ---- */
.iach-ac-panel { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 40px 48px 36px 40px; }
.iach-ac-emblem { display: block; align-self: flex-start; /* column flexbox would stretch the img */ height: 64px; width: auto; margin: 0 0 24px; }
.iach-ac-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.iach-ac-heading { margin: 0 0 8px; font-family: var(--iach-ac-font); font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--iach-ac-black); }
.iach-ac-sub { margin: 0 0 24px; font-size: 16px; line-height: 1.5; color: var(--iach-ac-gray-600); }

.iach-ac-form { margin: 0; }
.iach-ac-label { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--iach-ac-gray-700); }
.iach-ac-input {
	display: block; width: 100%; height: 52px; margin: 0 0 12px; padding: 0 18px;
	font-family: var(--iach-ac-font); font-size: 16px; color: var(--iach-ac-black);
	background: #fff; border: 1px solid var(--iach-ac-gray-400); border-radius: 12px;
	outline: 0; box-shadow: none; -webkit-appearance: none; appearance: none;
	transition: border-color .2s, box-shadow .2s;
}
.iach-ac-input::placeholder { color: var(--iach-ac-gray-500); opacity: 1; }
.iach-ac-input:focus { border-color: var(--iach-ac-black); box-shadow: 0 0 0 3px rgba(19, 20, 23, .10); }
.iach-ac-input[aria-invalid="true"] { border-color: var(--iach-ac-red); }
.iach-ac-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(240, 63, 57, .16); }

/* The site's primary pill: black, text + white arrow circle */
.iach-ac-btn {
	display: flex; align-items: center; width: 100%; min-height: 56px; margin: 0;
	padding: 4px 4px 4px 24px;
	background: var(--iach-ac-black); color: #fff;
	font-family: var(--iach-ac-font); font-size: 16px; font-weight: 500; line-height: 1; text-align: center;
	border: 0; border-radius: 100px; cursor: pointer;
	transition: background .3s ease, opacity .3s ease;
}
.iach-ac-btn-label { flex: 1; padding-left: 28px; /* 24px left pad + 28 = 52 = circle 48 + 4px right pad, so the text is centred in the pill */ }
.iach-ac-btn-icon {
	display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 100px; background: #fff;
	transition: transform .3s var(--iach-ac-spring);
}
.iach-ac-btn-icon svg { display: block; width: 24px; height: 24px; transition: transform .3s ease; }
.iach-ac-btn:hover .iach-ac-btn-icon { transform: scale(1.06); }
.iach-ac-btn:hover .iach-ac-btn-icon svg { transform: translate(2px, -2px); }
.iach-ac-btn:active .iach-ac-btn-icon { transform: scale(.94); }
.iach-ac-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--iach-ac-black); }
.iach-ac-btn[disabled] { opacity: .6; cursor: progress; }
.iach-ac-btn[disabled] .iach-ac-btn-icon, .iach-ac-btn[disabled] .iach-ac-btn-icon svg { transform: none; }

.iach-ac-error {
	margin: 14px 0 0; padding: 12px 16px;
	font-size: 14px; line-height: 1.5; color: var(--iach-ac-dark-red);
	background: var(--iach-ac-pink); border-radius: 12px;
}
.iach-ac-error[hidden] { display: none; }
.iach-ac-error a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.iach-ac-footer { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--iach-ac-gray-300); }
.iach-ac-footer p { margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: var(--iach-ac-gray-600); }
.iach-ac-footer p:last-child { margin-bottom: 0; }
/* links = the live site's link colour (--awb-custom_color_3) */
.iach-ac-footer a { color: #FF4F34; font-weight: 600; text-decoration: none; }
.iach-ac-footer a:hover, .iach-ac-footer a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.iach-ac-close {
	position: absolute; top: 16px; right: 16px; z-index: 2;
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; padding: 0; margin: 0;
	background: transparent; border: 0; border-radius: 100px;
	color: var(--iach-ac-gray-600); cursor: pointer;
	transition: background .2s, color .2s;
}
.iach-ac-close svg { width: 16px; height: 16px; display: block; }
.iach-ac-close:hover { background: var(--iach-ac-gray-300); color: var(--iach-ac-black); }
.iach-ac-close:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--iach-ac-black); }

/* ---- Gated-content placeholder ([iach_gated]) ---- */
.iach-ac-gated-note { padding: 16px 20px; border-radius: 12px; background: var(--iach-ac-gray-300); color: var(--iach-ac-gray-700); font-size: 15px; }

/* ---- Motion ---- */
@keyframes iach-ac-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes iach-ac-pop { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
.iach-ac-overlay.iach-ac-leaving { animation: iach-ac-fade .3s ease reverse both; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
	.iach-ac-overlay, .iach-ac-card, .iach-ac-overlay.iach-ac-leaving { animation: none; }
}

/* ---- Phones / narrow ---- */
@media (max-width: 760px) {
	.iach-ac-overlay { padding: 16px; }
	.iach-ac-card {
		flex-direction: column; min-height: 0; border-radius: 20px;
		max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
	}
	.iach-ac-visual { flex: 0 0 auto; padding: 12px 12px 0; }
	.iach-ac-visual-inner { height: 168px; border-radius: 12px; }
	.iach-ac-caption { left: 18px; right: 18px; bottom: 16px; gap: 4px; }
	.iach-ac-caption-title { font-size: 17px; }
	.iach-ac-caption-meta { font-size: 12px; }
	.iach-ac-panel { padding: 24px 24px 28px; }
	.iach-ac-emblem { height: 52px; margin-bottom: 18px; }
	.iach-ac-heading { font-size: 26px; }
	.iach-ac-sub { font-size: 15px; margin-bottom: 20px; }
	.iach-ac-footer { margin-top: 22px; padding-top: 16px; }
	.iach-ac-footer p { font-size: 12px; }
	.iach-ac-close { top: 20px; right: 20px; background: rgba(255, 255, 255, .92); color: var(--iach-ac-black); }
}