/* APP_FILE_VER: 1.5.0 */
/* ==========================================================================
   SAFE of Harnett County — plugin styles
   Covers the Safety Exit button and the homepage slider. These ship with the
   PLUGIN (not the theme) so the safety button always looks right, even if the
   theme changes.
   ========================================================================== */

:root {
	/* Recovered from the previous site's compiled theme variables, so the
	   plugin and the theme cannot drift apart on colour. */
	--safe-purple: #7f4cbe;        /* the7-accent-bg-color */
	--safe-pink: #d462c5;          /* the7-accent-bg-2 */
	--safe-purple-dark: #5f3596;
	--safe-ink: #1a1c20;           /* the7-footer-bg-color */
	--safe-nav: #2b2533;
	--safe-gold: #f2b705;
	--safe-exit-red: #b3261e;
	--safe-exit-red-dark: #8c1a14;
}

/* --- Safety Exit button ------------------------------------------------- */
.safe-exit {
	font: 700 15px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	color: #fff;
	background: var(--safe-exit-red);
	border: 0;
	cursor: pointer;
	border-radius: 6px;
	letter-spacing: .02em;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
	transition: background .15s ease, transform .15s ease;
}
.safe-exit:hover,
.safe-exit:focus-visible {
	background: var(--safe-exit-red-dark);
	transform: translateY(-1px);
	outline: 3px solid #ffd400;
	outline-offset: 2px;
}

/* Floating, always visible in a fixed corner. */
.safe-exit--float {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 2147483000; /* sit above almost everything */
	padding: 14px 18px;
	font-size: 16px;
}

/* Pinned at the very top, in normal flow, reachable before scrolling. */
.safe-exit--top {
	position: absolute;
	top: 8px;
	right: 12px;
	z-index: 2147483000;
	padding: 8px 14px;
}
@media (max-width: 600px) {
	.safe-exit--top { display: none; } /* the floating one is enough on phones */
	.safe-exit--float { right: 12px; bottom: 12px; padding: 12px 16px; }
}

/* --- Homepage slider ---------------------------------------------------- */
/*
   The track carries the aspect ratio, so it always has height even before the
   images load and no matter what is (or isn't) inside a slide. Before 1.2.0 the
   height came from the text box inside the slide, which meant an image-only
   slide collapsed to nothing and the picture never appeared.
*/
.safe-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--safe-ink, #1a1c20);
}
.safe-slider__track {
	position: relative;
	aspect-ratio: 1881 / 692;   /* Matches the shipped artwork. */
	max-height: 560px;
	min-height: 150px;          /* Floor for browsers without aspect-ratio. */
}
.safe-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .8s ease;
	display: flex;
	align-items: center;
}
.safe-slide.is-active { opacity: 1; visibility: visible; }

/* The picture itself. object-fit means it fills the box without distorting. */
.safe-slide__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	margin: 0;
	max-width: none;            /* Beat the global img{max-width:100%} rule. */
}

.safe-slide__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(26, 28, 32, .78) 0%, rgba(26, 28, 32, .45) 60%, rgba(26, 28, 32, .15) 100%);
}
.safe-slide__inner {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	padding: 64px 28px;
	width: 100%;
	color: #fff;
}
.safe-slide__headline {
	font-size: clamp(1.6rem, 4vw, 3rem);
	line-height: 1.1;
	margin: 0 0 12px;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.safe-slide__subtitle {
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	margin: 0 0 18px;
	max-width: 40ch;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}
.safe-slide__link {
	display: inline-block;
	background: var(--safe-gold, #f2b705);
	color: #2d144b;
	font-weight: 700;
	padding: 12px 22px;
	border-radius: 6px;
	text-decoration: none;
}
.safe-slide__link:hover { background: #ffe9a8; }

/* Image-only slides: the whole picture is the link. */
.safe-slide--image-only .safe-slide__cover-link {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 2;
}
.safe-slide--image-only .safe-slide__cover-link:focus-visible {
	outline: 3px solid var(--safe-gold, #f2b705);
	outline-offset: -6px;
}

.safe-slider__dots {
	position: absolute;
	bottom: 16px;
	left: 0;
	right: 0;
	display: flex;
	gap: 10px;
	justify-content: center;
	z-index: 3;
}
.safe-slider__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: transparent;
	cursor: pointer;
	padding: 0;
	box-shadow: 0 0 6px rgba(0, 0, 0, .5);
}
.safe-slider__dot.is-active { background: #fff; }

@media (max-width: 700px) {
	/*
	   The wording on the shipped slides is part of the picture, so cropping the
	   sides would cut the message in half. Below 700px the slider shows the
	   whole image instead, letterboxed rather than cropped.
	*/
	.safe-slider__track {
		aspect-ratio: auto;
		max-height: none;
	}
	.safe-slide {
		position: relative;
		display: none;
	}
	.safe-slide.is-active { display: block; }
	.safe-slide__img {
		position: relative;
		height: auto;
		object-fit: contain;
	}
	.safe-slide--image-only .safe-slide__inner { display: none; }
	.safe-slide__inner { padding: 32px 20px; }
	.safe-slide__scrim { position: absolute; }
}


/* ==========================================================================
   Added in 1.1.0 — callouts, Power & Control Wheel, service list, donate.
   ========================================================================== */

.safe-callout {
	background: #f3eefb;
	border-left: 4px solid #7f4cbe;
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
	border-radius: 4px;
}
.safe-callout p:last-child { margin-bottom: 0; }

.safe-power-wheel {
	margin: 1.5rem 0;
	max-width: 620px;
}
.safe-power-wheel__img {
	width: 100%;
	height: auto;
	border: 1px solid #d8d4e0;
	border-radius: 4px;
	display: block;
}
.safe-power-wheel figcaption {
	font-size: 0.875rem;
	color: #5c5566;
	margin-top: 0.5rem;
	line-height: 1.5;
}

.safe-service-list {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 0.75rem;
}
.safe-service-list__item { margin: 0; }
.safe-service-list__link {
	display: block;
	padding: 0.85rem 1rem;
	background: #fff;
	border: 1px solid #ddd8e6;
	border-left: 3px solid #7f4cbe;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
	color: #3b2d52;
}
.safe-service-list__link:hover,
.safe-service-list__link:focus {
	background: #f7f4fc;
	border-left-color: #5c2f96;
}

.safe-donate-form { margin: 1rem 0 0.5rem; }
.safe-donate-note {
	font-size: 0.875rem;
	color: #5c5566;
	margin-top: 0.25rem;
}
.safe-donate-embed { margin: 1rem 0; }

/* ==========================================================================
   Added in 1.4.0 — funder logos, shop photo, form placeholders
   ========================================================================== */

.safe-funders {
	margin: 2.5rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid #ddd6e8;
}
.safe-funders__label {
	font-size: .78rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #6b6478;
	margin: 0 0 1rem;
}
.safe-funders__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px 40px;
}
.safe-funders__item { margin: 0; }
.safe-funders__logo {
	/*
	   Sized by height so logos of different proportions sit on one optical
	   line. The FVPSA mark only survives as a 150x60 thumbnail, so it is
	   capped at its native height rather than stretched to match the other.
	*/
	max-height: 58px;
	width: auto;
	display: block;
}
.safe-funders__item a:focus-visible {
	outline: 3px solid var(--safe-purple);
	outline-offset: 4px;
}

.safe-shop-photo {
	margin: 0 0 1.75rem;
}
.safe-shop-photo__img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}

.safe-form-placeholder {
	background: #f7f4fc;
	border: 1px solid #ddd6e8;
	border-left: 4px solid var(--safe-purple);
	border-radius: 0 4px 4px 0;
	padding: 1.25rem 1.5rem;
	margin: 1.5rem 0;
}
.safe-form-placeholder__lead {
	font-weight: 700;
	margin-top: 0;
}
.safe-form-placeholder p:last-child { margin-bottom: 0; }
.safe-form-placeholder__admin {
	font-size: .9rem;
	color: #5c5566;
	border-top: 1px dashed #c9c2d6;
	padding-top: .75rem;
	margin-top: 1rem;
}