/*
 * WSP HMP CCW — custom block styles (front end + editor).
 * Blocks: wsp-hmp-ccw/slideshow, wsp-hmp-ccw/testimonials,
 *         wsp-hmp-ccw/pdf-viewer, wsp-hmp-ccw/google-map,
 *         wsp-hmp-ccw/banner, wsp-hmp-ccw/cover
 */

/* ------------------------------------------------------------------
   Slideshow (front end)
   Transition timing mirrors assets/js/slideshow.js: 1000ms per box.
------------------------------------------------------------------ */

.fl-slideshow-container {
	position: relative;
	height: 550px;
	overflow: hidden;
	background-color: var(--ccw-surface);
}

/* Only visible while the entrance animation plays (there is no outgoing
   slide yet, so the boxes need something to paint over). Removed as soon
   as the reveal finishes. */
.fl-slideshow-container.is-intro {
	background-color: #1c1c1c;
}

.fl-slideshow {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}

.fl-slideshow-image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	opacity: 0;
	z-index: 1;
}

.fl-slideshow-image.is-active {
	opacity: 1;
	z-index: 2;
}

.fl-slideshow-image.is-incoming {
	opacity: 1;
	z-index: 3;
}

.fl-slideshow-image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.fl-slideshow-grid {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 4;
	display: grid;
	pointer-events: none;
}

.fl-slideshow-grid__box {
	opacity: 0;
	background-repeat: no-repeat;
	transition: opacity 1000ms ease-out;
}

.fl-slideshow-grid__box.is-in {
	opacity: 1;
}

/* Arrows: vertically centred at the image edges (original: 100x55 hit area) */

.fl-slideshow-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 7;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 55px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: #ffffff;
	line-height: 0;
	opacity: 0.85;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65));
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.fl-slideshow-nav:hover,
.fl-slideshow-nav:focus {
	border: 0;
	background: none;
	color: #ffffff;
	opacity: 1;
}

.fl-slideshow-nav-prev {
	left: 0;
}

.fl-slideshow-nav-next {
	right: 0;
}

.fl-slideshow-container[data-count='1'] .fl-slideshow-nav {
	display: none;
}

@media (max-width: 767px) {
	.fl-slideshow-container {
		height: 360px;
	}

	.fl-slideshow-nav {
		width: 60px;
		height: 50px;
	}
}

/* Editor: preview breaks out of the canvas content padding */

.ccw-slideshow--editor {
	margin-left: -40px;
	margin-right: -40px;
}

@media (min-width: 1100px) {
	.ccw-slideshow--editor {
		margin-left: -20px;
		margin-right: -20px;
	}
}

.ccw-slideshow__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 180px;
	padding: 24px;
	border: 1px dashed var(--ccw-surface-border);
	background-color: var(--ccw-surface);
	text-align: center;
}

.ccw-slideshow__placeholder p {
	max-width: 460px;
	margin: 0;
	color: var(--ccw-link);
	font-size: 13px;
}

.ccw-slideshow__toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 10px;
}

.ccw-slideshow__count {
	color: var(--ccw-link);
	font-size: 12px;
}

.ccw-slideshow__strip {
	border: 1px solid var(--ccw-border);
}

/* ------------------------------------------------------------------
   Testimonials carousel
------------------------------------------------------------------ */

.ccw-testimonials {
	position: relative;
	max-width: 1100px;
	margin: 40px auto;
	padding: 0 50px;
	text-align: center;
}

.ccw-testimonials__viewport {
	overflow: hidden;
}

.ccw-testimonials__track {
	display: flex;
	align-items: flex-start;
	transition: transform 0.5s ease;
	will-change: transform;
}

.ccw-testimonials__slide {
	flex: 0 0 100%;
	min-width: 100%;
	margin: 0;
	padding: 0 10px;
	text-align: center;
}

/* Quote content: white, 18px, centered — matches the original testimonials */

.ccw-testimonials .wp-block-quote,
.ccw-testimonials .wp-block-quote blockquote,
.ccw-testimonials__slide blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	text-align: center;
	color: var(--ccw-text);
	font-size: 18px;
	line-height: 1.45;
}

.ccw-testimonials__slide p {
	margin: 0 0 10px;
	color: var(--ccw-text);
	font-size: 18px;
	line-height: 1.45;
	text-align: center;
}

.ccw-testimonials__slide cite {
	display: block;
	color: var(--ccw-text);
	font-size: 18px;
	font-style: italic;
}

.ccw-testimonials__slide cite p {
	margin: 0;
	font-size: 18px;
}

/* Arrows */

.ccw-testimonials__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	padding: 0;
	border: 0;
	background: none;
	color: var(--ccw-link);
	font-size: 23px;
	line-height: 0;
	opacity: 0.8;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.ccw-testimonials__arrow:hover,
.ccw-testimonials__arrow:focus {
	color: var(--ccw-link);
	opacity: 1;
	background: none;
	border: 0;
}

.ccw-testimonials__arrow--prev {
	left: 0;
}

.ccw-testimonials__arrow--next {
	right: 0;
}

.ccw-testimonials__arrow[hidden] {
	display: none;
}

/* Pager dots */

.ccw-testimonials__dots {
	margin-top: 20px;
	font-size: 0;
	text-align: center;
}

.ccw-testimonials__dots:empty {
	display: none;
}

.ccw-testimonials__dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--ccw-link);
	opacity: 0.2;
	cursor: pointer;
	vertical-align: middle;
}

.ccw-testimonials__dot:hover,
.ccw-testimonials__dot:focus {
	background-color: var(--ccw-link);
	border: 0;
	opacity: 0.6;
}

.ccw-testimonials__dot.is-active {
	opacity: 1;
}

/* Editor: quotes stacked, no carousel chrome */

.ccw-testimonials--editor {
	margin: 20px auto;
	padding: 0;
}

.ccw-testimonials--editor .ccw-testimonials__arrow,
.ccw-testimonials--editor .ccw-testimonials__dots {
	display: none;
}

.ccw-testimonials__preview {
	margin: 0 0 12px;
	padding: 20px 10px;
	border: 1px dashed var(--ccw-surface-border);
	text-align: center;
}

.ccw-testimonials__preview p {
	margin: 0 0 8px;
	color: var(--ccw-text);
	font-size: 18px;
	line-height: 1.45;
	text-align: center;
}

.ccw-testimonials__preview p:last-child {
	margin-bottom: 0;
}

.ccw-testimonials__preview .ccw-testimonials__empty {
	color: var(--ccw-link);
	font-size: 13px;
	font-style: italic;
}

.ccw-testimonials__by {
	font-style: italic;
	font-weight: bold;
}

@media (max-width: 767px) {
	.ccw-testimonials {
		padding: 0 35px;
	}
}

/* ------------------------------------------------------------------
   PDF viewer
------------------------------------------------------------------ */

.ccw-pdf-viewer {
	margin: 0 0 20px;
	text-align: left;
}

.ccw-pdf-viewer__frame {
	display: block;
	max-width: 100%;
	border: 1px solid var(--ccw-border);
	background-color: var(--ccw-surface);
}

.ccw-pdf-viewer__download {
	margin: 10px 0 0;
	font-size: 14px;
}

.ccw-pdf-viewer__download a {
	color: var(--ccw-link);
	text-decoration: underline;
}

.ccw-pdf-viewer__download a:hover {
	color: var(--ccw-link-hover);
}

/* Editor */

.ccw-pdf-viewer--editor {
	padding: 20px;
	border: 1px dashed var(--ccw-surface-border);
	background-color: var(--ccw-surface);
}

.ccw-pdf-viewer--editor .ccw-pdf-viewer__placeholder {
	margin: 10px 0 0;
	color: var(--ccw-text);
	font-size: 13px;
}

.ccw-pdf-viewer__editor-preview {
	margin: 10px 0;
	font-size: 12px;
	color: var(--ccw-link);
	word-break: break-all;
}

/* ------------------------------------------------------------------
   Google map
   Front end and editor share the same markup, so the editor preview is
   the real keyless Google Maps embed rather than a static placeholder.
------------------------------------------------------------------ */

.ccw-map {
	margin: 0 0 20px;
}

.ccw-map__frame {
	display: block;
	width: 100%;
	height: 450px;
	border: 0;
	background-color: var(--ccw-surface);
}

@media (max-width: 767px) {
	.ccw-map__frame {
		height: 360px;
	}
}

.ccw-map--editor {
	margin-left: -40px;
	margin-right: -40px;
}

@media (min-width: 1100px) {
	.ccw-map--editor {
		margin-left: -20px;
		margin-right: -20px;
	}
}

.ccw-map__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 240px;
	margin: 0;
	padding: 24px;
	border: 1px dashed var(--ccw-surface-border);
	background-color: var(--ccw-surface);
	color: var(--ccw-link);
	font-size: 13px;
	text-align: center;
}

.ccw-map__placeholder p {
	margin: 0;
}


/* ------------------------------------------------------------------
   Section banner (ribbon)
   Rebuilt from the original "FEATURES" ribbon: a 75px bar between two
   50x61 ribbon tails whose outer edge is notched 18px. The tails are the
   bar colour at 70% opacity, which over the white page is exactly the
   tint the reference PNG uses (#4dcfcf over #01bbba).
------------------------------------------------------------------ */

/* Negative margins rather than width: calc(100% + 40px) — the latter makes
   auto margins resolve to 0 and pushes the ribbon past the container's right
   edge, because .entry-content is padded 20px at >=1100px and 40-60px below. */

.ccw-banner {
	display: flex;
	align-items: center;
	width: auto;
	max-width: none;
	margin-left: -20px;
	margin-right: -20px;
}

.ccw-banner.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.ccw-banner::before,
.ccw-banner::after {
	content: "";
	flex: 0 0 50px;
	align-self: center;
	height: 61px;
	background-color: var(--ccw-banner-color, #01bbba);
	opacity: 0.7;
}

.ccw-banner::before {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 92%, 18px 50%, 0 8%);
}

.ccw-banner::after {
	clip-path: polygon(0 0, 100% 0, 100% 8%, calc(100% - 18px) 50%, 100% 92%, 100% 100%, 0 100%);
}

.ccw-banner .ccw-banner__text {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: 75px;
	margin: 0;
	padding: 0 24px;
	background-color: var(--ccw-banner-color, #01bbba);
	color: #ffffff;
	font-family: var(--ccw-font-display);
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
	word-break: break-word;
}

@media (max-width: 480px) {
	.ccw-banner::before,
	.ccw-banner::after {
		flex-basis: 30px;
		height: 50px;
	}

	.ccw-banner::before {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 92%, 12px 50%, 0 8%);
	}

	.ccw-banner::after {
		clip-path: polygon(0 0, 100% 0, 100% 8%, calc(100% - 12px) 50%, 100% 92%, 100% 100%, 0 100%);
	}

	.ccw-banner .ccw-banner__text {
		height: 62px;
		padding: 0 14px;
		font-size: 22px;
	}
}

/* ------------------------------------------------------------------
   Cover — full-width band. The photo stays at full brightness and one
   real element (.ccw-cover__big-box) carries the tint behind the copy.
   A pseudo-element was tried first and mis-painted as several boxes, so
   the panel is a real element in the markup: one element, one box.

   Geometry, measured off the reference shot at a 1890px viewport:
   100px gutters, panel padding 30px 40px, panel height = content + 60px,
   band height = max(400px, panel + 200px). Content is forced to white
   here only; the global h3/h4 default stays black everywhere else.
------------------------------------------------------------------ */

.ccw-cover {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100vw;
	max-width: 100vw;
	min-height: 400px;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* Vertical breathing room only; the horizontal gutters come from the
	   panel. Band height = max(400px, panel + 200px), so the panel sits on
	   a consistent 100px of photo above and below however long it gets. */
	padding: 100px 0;
	/* Photo only — no scrim layer, so the image reads at full brightness
	   outside the panel. --ccw-cover-image is set inline by the block; with
	   no photo the background-color below is the fallback. */
	background-image: var(--ccw-cover-image, none);
	background-color: #1c1c1c;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #ffffff;
}

/* The tinted panel behind the copy: a real element, not a pseudo-element.
   It hugs whatever is inside it and grows with it. */
.ccw-cover__big-box {
	width: calc(100% - 200px);
	margin: 0 auto;
	padding: 30px 40px;
	background-color: rgba(0, 0, 0, 0.62);
	text-align: center;
}

@media (max-width: 767px) {
	.ccw-cover {
		padding: 60px 0;
	}

	.ccw-cover__big-box {
		width: calc(100% - 40px);
		padding: 24px 20px;
	}
}

.ccw-cover h1,
.ccw-cover h2,
.ccw-cover h3,
.ccw-cover h4,
.ccw-cover h5,
.ccw-cover h6,
.ccw-cover p,
.ccw-cover li,
.ccw-cover ul,
.ccw-cover ol,
.ccw-cover dl,
.ccw-cover dd,
.ccw-cover dt,
.ccw-cover blockquote,
.ccw-cover figcaption,
.ccw-cover cite,
.ccw-cover code,
.ccw-cover pre,
.ccw-cover samp,
.ccw-cover kbd,
.ccw-cover var,
.ccw-cover span,
.ccw-cover div,
.ccw-cover strong,
.ccw-cover em,
.ccw-cover b,
.ccw-cover i,
.ccw-cover .entry-meta,
.ccw-cover a {
	color: #ffffff;
}

.ccw-cover a:hover,
.ccw-cover a:focus {
	color: #ffffff;
}

.ccw-cover .wp-block-button__link {
	color: #ffffff;
}

/* Editor: the canvas is already inset, so break out with plain gutters
   instead of the 100vw trick (same as .ccw-map--editor). */

.ccw-cover--editor {
	width: auto;
	max-width: none;
	margin-left: -40px;
	margin-right: -40px;
	/* Match the breakout with equal padding, so the panel lines up with the
	   canvas content edge instead of the block edge. */
	padding-left: 40px;
	padding-right: 40px;
}

@media (min-width: 1100px) {
	.ccw-cover--editor {
		margin-left: -20px;
		margin-right: -20px;
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* The front end uses 100px gutters on the panel; in the editor the canvas
   is already narrow, so use the editor's own gutter instead. */
.ccw-cover--editor .ccw-cover__big-box {
	width: calc(100% - 80px);
}

/* Editor-only heading colour: .editor-styles-wrapper h2 (0,1,1) ties with
   .ccw-cover h2, and editor.css is loaded last, so restate it scoped. */

.editor-styles-wrapper .ccw-cover h1,
.editor-styles-wrapper .ccw-cover h2,
.editor-styles-wrapper .ccw-cover h3,
.editor-styles-wrapper .ccw-cover h4,
.editor-styles-wrapper .ccw-cover h5,
.editor-styles-wrapper .ccw-cover h6 {
	color: #ffffff;
}