/*
 * Site notices. Style guide: callouts and warning boxes are square, padded
 * 24px 28px (phones 16px 20px), Merriweather title 20px and text 16px, Teal 900
 * text; the warning box puts red only in its bar and background. The urgent
 * (solid red) and highlight (gold) looks are optional, used when Katie asks.
 * The theme loads both fonts.
 */
.ktt-notice {
	--ktt-teal-50: #F0F7F9;
	--ktt-teal-200: #A5CCD5;
	--ktt-teal-500: #1F7F95;
	--ktt-teal-700: #155F70;
	--ktt-teal-900: #20343A;
	--ktt-red: #B4453A;
	--ktt-red-bg: #FDF4F3;
	--ktt-gold: #ECC662;
	--ktt-white: #FFFFFF;
	--ktt-caption: #4A5F66;
	--ktt-font-read: 'Merriweather', Georgia, serif;
	--ktt-font-ui: 'Montserrat', Arial, Helvetica, sans-serif;

	display: block;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0 0 32px;
	padding: 24px 28px;
	border-radius: 0;
	box-shadow: none;
	background: var(--ktt-teal-50);
	border-left: 4px solid var(--ktt-teal-500);
	color: var(--ktt-teal-900);
	font-family: var(--ktt-font-read);
	font-size: 16px;
	line-height: 1.8;
}
.ktt-notice .ktt-notice__title {
	margin: 0 0 8px;
	font-family: var(--ktt-font-read);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	color: inherit;
}
.ktt-notice .ktt-notice__text p { margin: 0 0 12px; color: inherit; font-size: 16px; line-height: 1.8; }
.ktt-notice .ktt-notice__text p:last-child { margin-bottom: 0; }
.ktt-notice a { color: var(--ktt-teal-500); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ktt-notice a:hover { color: var(--ktt-teal-700); }

.ktt-notice--warning { background: var(--ktt-red-bg); border-left-color: var(--ktt-red); }
.ktt-notice--warning .ktt-notice__title,
.ktt-notice--urgent .ktt-notice__title { font-weight: 700; }

.ktt-notice--urgent { background: var(--ktt-red); border-left: 0; color: var(--ktt-white); }
.ktt-notice--teal { background: var(--ktt-teal-500); border-left: 0; color: var(--ktt-white); }
.ktt-notice--urgent a, .ktt-notice--urgent a:hover,
.ktt-notice--teal a, .ktt-notice--teal a:hover { color: var(--ktt-white); }

.ktt-notice--light { background: var(--ktt-teal-200); border-left: 0; }
.ktt-notice--gold { background: var(--ktt-gold); border-left: 0; }
.ktt-notice--light a, .ktt-notice--gold a { color: var(--ktt-teal-900); }

.ktt-notice .ktt-notice__preview {
	display: inline-block;
	margin: 0 0 10px;
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--ktt-white);
	color: var(--ktt-teal-900);
	font-family: var(--ktt-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

@media (max-width: 640px) {
	.ktt-notice { padding: 16px 20px; }
	.ktt-notice .ktt-notice__title { font-size: 18px; }
}

/* Admin page only */
.ktt-admin .ktt-notice-card { max-width: 960px; margin: 0 0 28px; padding: 6px 20px 18px; background: #fff; border: 1px solid #D7E8ED; }
.ktt-admin .ktt-style-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ktt-admin .ktt-style-choices label { display: grid; gap: 4px; cursor: pointer; }
.ktt-admin .ktt-style-choices .ktt-notice { margin: 0; padding: 10px 14px; font-size: 14px; line-height: 1.5; }
.ktt-admin .ktt-style-choices .ktt-notice .ktt-notice__title { font-size: 15px; margin: 0; }
.ktt-admin .ktt-where { max-height: 260px; overflow-y: auto; border: 1px solid #D7E8ED; padding: 8px 12px; background: #fff; }
.ktt-admin .ktt-where label { display: block; padding: 2px 0; }
.ktt-admin .ktt-type { color: #4A5F66; font-size: 12px; margin-left: 4px; }

/*
 * Pop-up. Opens with the page (<dialog open>), closes with a form button,
 * so it works before WP Rocket lets scripts run. The style guide allows one
 * floating shadow on things that sit over the page.
 */
.ktt-popup { display: none; }
.ktt-popup[open] {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 16px;
	border: 0;
	background: rgba(32, 52, 58, .55);
	color: #20343A;
}
.ktt-popup .ktt-popup__box {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	margin: 0;
	padding: 32px 28px 24px;
	box-shadow: 0 6px 20px rgba(32, 52, 58, .14);
}
.ktt-popup .ktt-popup__box.ktt-notice--callout,
.ktt-popup .ktt-popup__box.ktt-notice--warning { background-clip: padding-box; }
.ktt-popup .ktt-popup__box.ktt-notice--callout { background: #F0F7F9; }
.ktt-popup form { margin: 0; }
.ktt-popup .ktt-popup__x-form { position: absolute; top: 6px; right: 6px; }
.ktt-popup .ktt-popup__x {
	width: 36px; height: 36px; padding: 0; border: 0; border-radius: 4px;
	background: transparent; color: inherit; font-size: 26px; line-height: 1; cursor: pointer;
}
.ktt-popup .ktt-popup__x:hover { background: rgba(255, 255, 255, .35); }
.ktt-popup .ktt-popup__actions { margin-top: 20px; text-align: right; }
.ktt-popup .ktt-popup__close {
	padding: 13px 29px; border: 1px solid #1F7F95; border-radius: 4px;
	background: #1F7F95; color: #FFFFFF; cursor: pointer; box-shadow: none;
	font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .02em; line-height: 1.2;
}
.ktt-popup .ktt-popup__close:hover { background: #155F70; border-color: #155F70; }
/* On the solid looks the button sits on colour: outlined in white. */
.ktt-popup .ktt-notice--urgent .ktt-popup__close,
.ktt-popup .ktt-notice--teal .ktt-popup__close { background: transparent; border-color: #FFFFFF; }
.ktt-popup .ktt-notice--urgent .ktt-popup__close:hover,
.ktt-popup .ktt-notice--teal .ktt-popup__close:hover { background: rgba(255, 255, 255, .2); }
.ktt-popup .ktt-popup__x:focus-visible,
.ktt-popup .ktt-popup__close:focus-visible { outline: 3px solid #84BCC9; outline-offset: 2px; }
@media (max-width: 640px) {
	.ktt-popup .ktt-popup__box { padding: 28px 20px 20px; }
	.ktt-popup .ktt-popup__actions { text-align: center; }
	.ktt-popup .ktt-popup__close { width: 100%; }
}