/* ==========================================================================
   HAPI sections: block patterns, cards and the custom blocks.
   Loaded on the front end and in the editor canvas (inc/blocks.php).
   ========================================================================== */

/* Full-width pages built from sections (homepage, or any page set to
   Full Width that isn't using the standard page header): edge to edge. */
.full-width-content:not(.hapi-template) .site-main,
.full-width-content:not(.hapi-template) .inside-article,
.full-width-content:not(.hapi-template) .entry-content {
	margin: 0;
	padding: 0;
}

.full-width-content .entry-content > .alignfull {
	margin-top: 0;
	margin-bottom: 0;
}

/* Shared section spacing */
.hapi-section {
	padding: 56px var(--hapi-gutter, clamp(20px, 4vw, 48px));
}

.hapi-section.hapi-communities,
.hapi-section.hapi-guide-jobs {
	padding-top: 48px;
	padding-bottom: 48px;
}

.hapi-section h2 {
	margin-bottom: 0;
}

.hapi-section-head {
	gap: 8px 16px;
	margin-bottom: 20px;
}

.hapi-section-intro {
	margin-bottom: 22px;
}

.hapi-section-intro > * + * {
	margin-top: 6px;
}

.hapi-section-lede {
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
}

.hapi-communities .hapi-section-lede {
	color: #d6d6d6;
}

.hapi-guide-jobs .hapi-section-lede {
	color: #444444;
}

.hapi-more-link {
	margin: 0;
	font-weight: 600;
}

.hapi-more-link a {
	color: var(--hapi-link, #8a5d18);
	text-decoration: none;
}

.hapi-more-link a:hover {
	color: var(--hapi-link-hover, #6b4712);
	text-decoration: underline;
}

.hapi-eyebrow,
.hapi-section h2.hapi-eyebrow {
	margin: 0 0 10px;
	color: var(--hapi-muted, #6b6760);
	font-family: var(--hapi-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hapi-hero.wp-block-cover {
	align-items: flex-start;
	padding: 84px var(--hapi-gutter, clamp(20px, 4vw, 48px)) 120px;
}

/* No photo yet: show the striped placeholder from the mockup. */
.hapi-hero.wp-block-cover:not(:has(.wp-block-cover__image-background, .wp-block-cover__video-background)) {
	background: repeating-linear-gradient(135deg, #2f2f2f 0 12px, #363636 12px 24px);
}

.hapi-hero.wp-block-cover:not(:has(.wp-block-cover__image-background, .wp-block-cover__video-background))::before {
	content: "Placeholder: hero photo";
	position: absolute;
	top: 20px;
	right: 24px;
	z-index: 2;
	color: #aaaaaa;
	font-family: var(--hapi-font-mono);
	font-size: 12px;
}

/* Position the tagline strip against the cover, not the inner container. */
.hapi-hero .wp-block-cover__inner-container {
	position: static;
}

.hapi-hero__content {
	position: relative;
	z-index: 1;
	gap: 20px;
	max-width: 640px;
}

.hapi-hero__content > * {
	margin: 0;
}

.hapi-hero__title {
	line-height: 1.02;
}

.hapi-hero__lede {
	color: #e6e6e6;
	font-size: 19px;
	line-height: 1.5;
}

.hapi-hero .wp-block-buttons {
	gap: 12px;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 12px 24px;
	border: 2px solid currentColor;
	background: transparent;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: rgba(255, 197, 80, 0.12);
}

.hapi-tagline-strip {
	position: absolute;
	bottom: 36px;
	left: 0;
	z-index: 1;
	max-width: 100%;
	margin: 0;
	/* Left edge lines up with the hero text (1184px content column). */
	padding: 10px var(--hapi-gutter, clamp(20px, 4vw, 48px)) 10px max(var(--hapi-gutter, clamp(20px, 4vw, 48px)), calc((100% - 1184px) / 2));
	background: var(--hapi-gold, #f2c21b);
	color: #222222;
	font-size: clamp(13px, 1.4vw, 17px);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ==========================================================================
   News + calendar
   ========================================================================== */

.hapi-news-calendar {
	gap: 40px;
	margin-bottom: 0;
}

/* News cards (Query Loop) */
.hapi-cards .wp-block-post-template {
	gap: 20px;
	margin: 0;
	padding: 0;
}

.hapi-cards--news .wp-block-post {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hapi-cards--news .wp-block-post > * {
	margin: 0;
}

.hapi-cards .wp-block-post-featured-image {
	height: 140px;
	margin: 0;
	overflow: hidden;
}

.hapi-cards .wp-block-post-featured-image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center top;
}

.hapi-no-image {
	background: repeating-linear-gradient(135deg, #eeeeee 0 8px, #e4e4e4 8px 16px);
}

.hapi-card-tag,
.hapi-card-tag a {
	color: var(--hapi-link, #8a5d18);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
}

.hapi-card-title,
.hapi-section .hapi-card-title {
	font-family: var(--hapi-font-body);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.hapi-card-title a {
	color: var(--hapi-text, #1d1d1d);
	text-decoration: none;
}

.hapi-card-title a:hover {
	color: var(--hapi-link-hover, #6b4712);
	text-decoration: underline;
}

.hapi-card-more {
	align-self: flex-start;
	color: var(--hapi-link, #8a5d18);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.hapi-card-more:hover {
	color: var(--hapi-link-hover, #6b4712);
}

/* Dark sidebar panel (calendar) */
.hapi-dark-panel {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	color: #ededed;
}

.hapi-dark-panel > * {
	margin: 0;
}

.hapi-panel-title,
.hapi-section .hapi-panel-title {
	color: #ffffff;
	font-size: 22px;
}

.hapi-panel-link a {
	color: var(--hapi-amber, #ffc550);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.hapi-panel-link a:hover {
	text-decoration: underline;
}

/* Upcoming events block */
.hapi-event-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hapi-event {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 0;
}

.hapi-date-badge {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	width: 54px;
	padding: 6px 0;
	background: var(--hapi-amber, #ffc550);
	color: #222222;
	line-height: 1.15;
	text-align: center;
}

.hapi-date-badge__month {
	font-size: 11px;
	font-weight: 700;
}

.hapi-date-badge__day {
	font-family: var(--hapi-font-heading);
	font-size: 20px;
}

.hapi-event__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hapi-event__title {
	color: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.hapi-event__title:hover {
	color: var(--hapi-amber, #ffc550);
	text-decoration: underline;
}

.hapi-event__place {
	color: #bbbbbb;
	font-size: 13px;
}

.hapi-event-list__empty,
.hapi-job-list__empty {
	margin: 0;
	font-size: 15px;
	opacity: 0.85;
}

/* ==========================================================================
   Communities of Service
   ========================================================================== */

.hapi-cards--communities .wp-block-post-template {
	gap: 16px;
}

.hapi-community-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: 22px;
	border-top: 5px solid var(--hapi-amber, #ffc550);
}

.hapi-community-card > * {
	margin: 0;
}

.hapi-community-card__title,
.hapi-section .hapi-community-card__title {
	font-size: 20px;
	line-height: 1.15;
}

.hapi-community-card__title a {
	color: #ffffff;
	text-decoration: none;
}

.hapi-community-card__title a:hover {
	color: var(--hapi-amber, #ffc550);
}

.hapi-community-card__desc,
.hapi-community-card__desc p,
.hapi-community-card .wp-block-post-excerpt__excerpt {
	margin: 0;
	color: #cfcfcf;
	font-size: 14px;
	line-height: 1.45;
}

/* ==========================================================================
   Pavement Guide + jobs
   ========================================================================== */

.hapi-guide-jobs__cols {
	gap: 40px;
	margin-bottom: 0;
}

.hapi-guide-jobs__cols .wp-block-column > * + * {
	margin-top: 14px;
}

.hapi-guide-jobs__cols .wp-block-column > .hapi-eyebrow + * {
	margin-top: 0;
}

.hapi-job-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hapi-job {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 14px 18px;
	background: #ffffff;
}

.hapi-job__title {
	color: var(--hapi-text, #1d1d1d);
	font-weight: 600;
	text-decoration: none;
}

.hapi-job__title:hover {
	color: var(--hapi-link-hover, #6b4712);
	text-decoration: underline;
}

.hapi-job__location {
	flex-shrink: 0;
	color: var(--hapi-muted, #6b6760);
	font-size: 14px;
}

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 781px) {
	.hapi-hero.wp-block-cover {
		padding-top: 56px;
	}

	.hapi-news-calendar,
	.hapi-guide-jobs__cols {
		gap: 32px;
	}
}

/* ==========================================================================
   Content styles (Styles panel options + core blocks inside articles/pages)
   ========================================================================== */

.is-style-lede {
	color: var(--hapi-text, #1d1d1d);
	font-size: clamp(19px, 1.6vw, 21px);
	line-height: 1.6;
}

.is-style-eyebrow {
	margin-bottom: 0;
	color: var(--hapi-link, #8a5d18);
	font-family: var(--hapi-font-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.is-style-byline {
	color: #5b5750;
	font-size: 15px;
	line-height: 1.5;
}

.is-style-byline strong {
	color: #222222;
}

.wp-block-pullquote {
	position: relative;
	margin: 8px 0;
	padding: 28px 32px;
	border: 0;
	background: var(--hapi-charcoal, #333333);
	color: #ffffff;
	text-align: left;
}

.wp-block-pullquote::before {
	content: "";
	display: block;
	width: 48px;
	height: 6px;
	margin-bottom: 16px;
	background: var(--hapi-amber, #ffc550);
}

.wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.wp-block-pullquote blockquote p,
.wp-block-pullquote p {
	margin: 0;
	font-family: var(--hapi-font-heading);
	font-size: 28px;
	font-style: normal;
	line-height: 1.2;
}

.wp-block-pullquote cite {
	display: block;
	margin-top: 12px;
	color: #d6d6d6;
	font-size: 14px;
	font-style: normal;
}

.wp-block-image figcaption,
.wp-element-caption {
	color: var(--hapi-muted, #6b6760);
	font-size: 13px;
	text-align: left;
}

/* Small left-floated images (imported newsletter photos): stop floating on
   phones so text doesn't squeeze into a sliver beside them. */
.entry-content .alignleft {
	margin: 4px 24px 16px 0;
}

@media (max-width: 600px) {
	.entry-content .alignleft {
		float: none;
		margin: 0 0 16px;
	}
}