/*
 * Archive + search pages (archive.php, search.php,
 * template-parts/archive/archive-hero.php).
 *
 * Only the hero, the pagination and the empty state live here. The rows
 * themselves are the Our Blogs page's .blog-list-card, unchanged — this
 * page renders them inside the same .blog-listing wrapper, which is what
 * supplies both the container and the --bl-* tokens those cards read
 * (assets/css/blog.css, enqueued alongside this file).
 */

.archive-hero,
.archive-listing {
	--ar-font:      "Sora", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--ar-heading:   #030712;
	--ar-body:      #364153;
	--ar-muted:     #6A7282;
	--ar-green:     #7FB04F;
	--ar-green-ink: #5F8F3A;
	--ar-cream:     #FCECD8;
	--ar-border:    #F1F1F3;
	--ar-max:       1704px;
}

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

.archive-hero {
	position:         relative;
	overflow:         hidden;
	padding:          64px 24px;
	background-color: #FDF7EF;
	background-image: linear-gradient( 118deg, var( --ar-cream ) 0%, #FDF6EC 46%, #F1F9FE 100% );
}

.archive-hero__blob {
	position:       absolute;
	right:          -140px;
	bottom:         -210px;
	width:          500px;
	height:         460px;
	border-radius:  48% 52% 38% 62% / 54% 42% 58% 46%;
	background:     rgba( 127, 176, 79, 0.10 );
	pointer-events: none;
}

.archive-hero__inner {
	position:  relative;
	z-index:   1;
	max-width: var( --ar-max );
	margin:    0 auto;
}

/* The context WordPress would otherwise bake into the heading ("Tag: news")
   — carried as a pill so the term itself can be the <h1>. */
.archive-hero__kicker {
	display:        inline-block;
	margin:         0 0 16px;
	padding:        7px 15px;
	border-radius:  100px;
	background:     rgba( 255, 255, 255, 0.72 );
	font-family:    var( --ar-font );
	font-size:      13px;
	font-weight:    500;
	line-height:    18px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          var( --ar-body );
}

.archive-hero__title {
	margin:         0;
	font-family:    var( --ar-font );
	font-size:      clamp( 30px, 3.8vw, 52px );
	font-weight:    600;
	line-height:    1.14;
	letter-spacing: -0.015em;
	color:          var( --ar-heading );
	/* Search queries and long tag names can be a single unbroken string. */
	overflow-wrap:  anywhere;
}

.archive-hero__description {
	max-width:   720px;
	margin:      14px 0 0;
	font-family: var( --ar-font );
	font-size:   17px;
	line-height: 1.65;
	color:       var( --ar-body );
}

.archive-hero__description p {
	margin: 0;
}

.archive-hero__count {
	margin:      14px 0 0;
	font-family: var( --ar-font );
	font-size:   15px;
	line-height: 22px;
	color:       var( --ar-muted );
}

/* =============================================================================
   Listing
   =============================================================================
   .archive-listing sits alongside .blog-listing, which already provides the
   max-width, gutters and bottom padding — only the top margin is trimmed,
   since a hero now sits directly above instead of open page. */

.archive-listing {
	margin-top: 44px;
}

/* =============================================================================
   Pagination
   =============================================================================
   bennelongia_pagination() emits Bootstrap's .pagination markup, which would
   otherwise render in Bootstrap blue. Restyled in the brand's green, scoped
   to this page so Bootstrap's own pagination is untouched elsewhere. */

.archive-listing .pagination-wrapper {
	margin-top: 36px;
}

.archive-listing .pagination {
	display:         flex;
	flex-wrap:       wrap;
	justify-content: center;
	gap:             8px;
	margin:          0;
	padding:         0;
	list-style:      none;
}

.archive-listing .page-item {
	margin: 0;
}

.archive-listing .page-link {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-width:       42px;
	height:          42px;
	padding:         0 12px;
	border:          1px solid var( --ar-border );
	border-radius:   10px;
	background:      #FFFFFF;
	font-family:     var( --ar-font );
	font-size:       15px;
	font-weight:     500;
	color:           var( --ar-heading );
	text-decoration: none;
	transition:      background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.archive-listing .page-link:hover,
.archive-listing .page-link:focus-visible {
	border-color: var( --ar-green );
	background:   #F3F7EE;
	color:        var( --ar-green-ink );
	outline:      none;
}

.archive-listing .page-item.active .page-link,
.archive-listing .page-link.current {
	border-color: var( --ar-green );
	background:   var( --ar-green );
	color:        #FFFFFF;
}

/* =============================================================================
   Empty state
   ============================================================================= */

.archive-no-results {
	max-width:     640px;
	margin:        0 auto;
	padding:       48px 32px 52px;
	border:        1px solid var( --ar-border );
	border-radius: 20px;
	background:    #FFFFFF;
	text-align:    center;
}

.archive-no-results__title {
	margin:      0;
	font-family: var( --ar-font );
	font-size:   26px;
	font-weight: 600;
	line-height: 1.25;
	color:       var( --ar-heading );
}

.archive-no-results__text {
	margin:      12px 0 26px;
	font-family: var( --ar-font );
	font-size:   16px;
	line-height: 1.65;
	color:       var( --ar-body );
}

/* get_search_form() emits WordPress's default markup, so it is targeted by
   element rather than by a class the theme controls. */
.archive-no-results .search-form {
	display:         flex;
	flex-wrap:       wrap;
	gap:             10px;
	justify-content: center;
}

.archive-no-results .search-form label {
	flex:   1 1 240px;
	margin: 0;
}

.archive-no-results .search-form .search-field {
	width:         100%;
	height:        48px;
	padding:       0 16px;
	border:        1px solid var( --ar-border );
	border-radius: 10px;
	background:    #FFFFFF;
	font-family:   var( --ar-font );
	font-size:     16px;
	color:         var( --ar-heading );
}

.archive-no-results .search-form .search-field:focus {
	border-color: var( --ar-green );
	box-shadow:   0 0 0 3px rgba( 127, 176, 79, 0.22 );
	outline:      none;
}

.archive-no-results .search-form .search-submit {
	height:        48px;
	padding:       0 24px;
	border:        0;
	border-radius: 10px;
	background:    var( --ar-green );
	font-family:   var( --ar-font );
	font-size:     16px;
	font-weight:   500;
	color:         #FFFFFF;
	cursor:        pointer;
	transition:    background-color 0.2s ease;
}

.archive-no-results .search-form .search-submit:hover,
.archive-no-results .search-form .search-submit:focus-visible {
	background: var( --ar-green-ink );
	outline:    none;
}

.archive-no-results__link {
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	margin-top:      26px;
	font-family:     var( --ar-font );
	font-size:       16px;
	font-weight:     500;
	color:           var( --ar-green );
	text-decoration: none;
	transition:      gap 0.2s ease, color 0.2s ease;
}

.archive-no-results__link:hover,
.archive-no-results__link:focus-visible {
	gap:     12px;
	color:   var( --ar-green-ink );
	outline: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.archive-listing .page-link,
	.archive-no-results__link {
		transition: none;
	}
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media ( max-width: 1024px ) {
	.archive-hero {
		padding: 52px 24px;
	}

	.archive-listing {
		margin-top: 32px;
	}
}

@media ( max-width: 640px ) {
	.archive-hero {
		padding: 40px 16px;
	}

	.archive-hero__kicker {
		margin-bottom: 12px;
	}

	.archive-hero__blob {
		right:  -110px;
		bottom: -170px;
		width:  330px;
		height: 310px;
	}

	.archive-listing {
		margin-top: 24px;
	}

	.archive-no-results {
		padding:       36px 20px 40px;
		border-radius: 16px;
	}

	.archive-no-results__title {
		font-size: 22px;
	}

	/* Stacked: side by side the field drops under ~200px wide. */
	.archive-no-results .search-form .search-submit {
		width: 100%;
	}
}