/*
 * aSS World — a Ernesto Child Theme
 */

:root {
  /* Showcase & news polygon colour — mirrors --color-primary set in Customizer */
	--ps-accent: var(--color-primary);
}


/* ============================================================
   3. GLOBAL RESETS / SITE TWEAKS
   ============================================================ */

body {
	font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 300;
	letter-spacing: -0.02em;
}

/* Crisp sticky header — always white */
.site-header {
	background: #fff;
	border-bottom: 1px solid var(--border-light, #eee);
}

/* Remove default .container padding when sections go full-bleed */
#content {
	overflow-x: hidden;
}


/* ============================================================
   HERO SLIDER — aSS layout
   ============================================================ */

/* TODO */


/* ============================================================
   HP TILES — two equal image tiles
   Left: latest contributor winner · Right: latest top model
   ============================================================ */

.hp-tiles {
	padding: 2rem 0 3rem;
	background: var(--bg-alt, #f5f5f5);
}

.hp-tiles__grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   1rem;
	height:                65vh;
	min-height:            480px;
	max-height:            700px;
}

.hp-tiles__tile {
	position:        relative;
	overflow:        hidden;
	border-radius:   var(--radius, 4px);
	display:         block;
	text-decoration: none;
	/* gradient fallback when no featured image is available */
	background: linear-gradient(
		145deg,
		var(--color-primary,   #cc3366) 0%,
		var(--color-secondary, #9966cc) 100%
	);
}

.hp-tiles__tile-img {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.4s ease;
}

.hp-tiles__tile:hover .hp-tiles__tile-img {
	transform: scale(1.03);
}

.hp-tiles__tile-body {
	position:   absolute;
	bottom:     0;
	left:       0;
	right:      0;
	padding:    1.5rem 1.25rem 1.25rem;
	background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
	display:    flex;
	flex-direction: column;
	gap:        0.35rem;
}

.hp-tiles__tile-label {
	font-family:    var(--font-heading);
	font-size:      0.7rem;
	font-weight:    700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color:          rgba(255,255,255,0.75);
}

.hp-tiles__tile-title {
	font-family:    var(--font-heading);
	font-size:      clamp(1.1rem, 1.8vw, 1.6rem);
	font-weight:    300;
	letter-spacing: -0.02em;
	line-height:    1.2;
	color:          #fff;
	margin:         0;
	text-shadow:    0 1px 3px rgba(0,0,0,0.35);
}

.hp-tiles__tile-cta {
	display:        block;
	font-family:    var(--font-heading);
	font-size:      0.8rem;
	letter-spacing: 0.04em;
	color:          rgba(255,255,255,0.8);
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 768px) {
	.hp-tiles__grid {
		grid-template-columns: 1fr;
		height:                auto;
		min-height:            0;
		max-height:            none;
	}

	.hp-tiles__tile {
		min-height: 60vw;
	}
}

/* ── High-contrast overrides ────────────────────────────── */

body.high-contrast .hp-tiles__tile {
	background: #000     !important; /* !important: defeats gradient fallback */
	border:     2px solid #fff !important;
}

body.high-contrast .hp-tiles__tile-title,
body.high-contrast .hp-tiles__tile-cta {
	color: #fff !important;
}

/* ── Reduced motion ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.hp-tiles__tile-img {
		transition: none;
	}
}


/* ============================================================
   HP NEWSLETTER — inline signup between hero and tiles
   Description text left · form fields right (desktop)
   ============================================================ */

.hp-newsletter {
	padding:    3rem 0 3.5rem;
	background: var(--bg-body);
	border-top: 3px solid var(--color-primary, #cc3366);
}

/* Strip card chrome from parent newsletter.css */
.hp-newsletter .ernesto-newsletter-form,
.hp-newsletter .ernesto-newsletter-shortcode {
	background: transparent !important; /* !important: overrides newsletter.css .ernesto-newsletter-form */
	border:     none        !important;
	box-shadow: none        !important;
	padding:    0           !important;
	margin:     0           !important;
}

/* Two-column: description (2fr) left, form (3fr) right */
@media (min-width: 768px) {
	.hp-newsletter .ernesto-newsletter-form {
		display:               grid;
		grid-template-columns: 2fr 3fr;
		gap:                   2rem 4rem;
		align-items:           center;
	}
}

/* ── Description: left column ──────────────────────────── */

.hp-newsletter .newsletter-description {
	font-family:    var(--font-heading);
	font-size:      clamp(1rem, 1.5vw, 1.15rem);
	font-weight:    300;
	letter-spacing: -0.01em;
	line-height:    1.65;
	color:          var(--text-main);
	margin:         0;
}

/* Brand label injected above the description */
.hp-newsletter .newsletter-description::before {
	content:        'aSS Newsletter';
	display:        block;
	font-family:    var(--font-heading);
	font-size:      0.68rem;
	font-weight:    700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color:          var(--color-primary, #cc3366);
	margin-bottom:  0.75rem;
}

/* ── Form: right column ─────────────────────────────────── */

.hp-newsletter .newsletter-form {
	display:        flex;
	flex-direction: column;
	gap:            0.75rem;
}

.hp-newsletter .newsletter-form .newsletter-label {
	font-family:    var(--font-heading);
	font-size:      0.78rem;
	font-weight:    600;
	letter-spacing: 0.04em;
	color:          var(--text-muted, #777);
	margin-bottom:  0.2rem;
}

.hp-newsletter .newsletter-form input[type="text"],
.hp-newsletter .newsletter-form input[type="email"] {
	background:    var(--bg-body);
	border:        1px solid var(--border-color, rgba(128,128,128,0.3));
	border-radius: var(--radius, 4px);
	padding:       0.6rem 0.875rem;
	font-family:   var(--font-body);
	font-size:     0.95rem;
	color:         var(--text-main);
	width:         100%;
	transition:    border-color 0.2s ease, box-shadow 0.2s ease;
}

.hp-newsletter .newsletter-form input[type="text"]:focus,
.hp-newsletter .newsletter-form input[type="email"]:focus {
	outline:      none;
	border-color: var(--color-primary, #cc3366);
	box-shadow:   0 0 0 3px rgba(204, 51, 102, 0.12);
}

/* Button — pill style matching tile CTAs */
.hp-newsletter .newsletter-submit {
	background:    var(--color-secondary, #9966cc) !important; /* !important: overrides newsletter.css --color-primary button */
	color:         var(--text-on-brand, #fff)      !important;
	border:        none                            !important;
	border-radius: 2rem                            !important;
	padding:       0.55rem 1.5rem                  !important;
	font-family:   var(--font-heading);
	font-size:     0.9rem                          !important;
	font-weight:   500                             !important;
	min-width:     0                               !important;
	box-shadow:    none                            !important;
	text-shadow:   none;
	cursor:        pointer;
	align-self:    flex-start;
	transition:    background 0.2s ease, transform 0.15s ease !important;
}

.hp-newsletter .newsletter-submit:hover {
	background: var(--color-secondary-hover, var(--color-secondary, #9966cc)) !important;
	transform:  translateY(-1px);
	box-shadow: none !important;
}

.hp-newsletter .newsletter-submit:disabled {
	opacity:   0.5    !important;
	transform: none   !important;
	cursor:    not-allowed;
}

/* Consent checkbox */
.hp-newsletter .consent-label {
	font-size: 0.8rem;
	color:     var(--text-muted, #888);
	gap:       0.5rem;
}

.hp-newsletter .consent-label a {
	color: var(--color-primary, #cc3366);
}

.hp-newsletter .consent-label input[type="checkbox"] {
	accent-color: var(--color-primary, #cc3366);
}

/* Status messages */
.hp-newsletter .newsletter-message {
	font-size:     0.875rem;
	border-radius: var(--radius, 4px);
}

/* ── Mobile ─────────────────────────────────────────────── */

@media (max-width: 767px) {
	.hp-newsletter {
		padding: 2rem 0 2.5rem;
	}

	.hp-newsletter .newsletter-description {
		margin-bottom: 1.5rem;
	}

	.hp-newsletter .newsletter-submit {
		align-self: stretch !important; /* !important: overrides flex-start on mobile */
		text-align: center;
	}
}

/* ── High-contrast overrides ────────────────────────────── */

body.high-contrast .hp-newsletter {
	border-top-color: #000 !important; /* !important: overrides --color-primary */
}

body.high-contrast .hp-newsletter .newsletter-description::before {
	color: #000 !important;
}

body.high-contrast .hp-newsletter .newsletter-submit {
	background:    #000 !important;
	color:         #fff !important;
	border:        2px solid #fff !important;
	border-radius: 0              !important;
}

body.high-contrast .hp-newsletter .newsletter-form input[type="text"],
body.high-contrast .hp-newsletter .newsletter-form input[type="email"] {
	border:     2px solid #000 !important;
	background: #fff           !important;
	color:      #000           !important;
}

/* ── Reduced motion ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.hp-newsletter .newsletter-submit {
		transition: none !important;
	}
}


/* ============================================================
   AWG POST SINGLE — page wrapper (child theme single.php)
   ============================================================ */

.awg-post-single {
	padding: 2rem 0 3rem;
}

.awg-post-single__title {
	font-size:      clamp( 1.5rem, 3vw, 2.5rem );
	font-weight:    300;
	letter-spacing: -0.02em;
	margin-bottom:  1.5rem;
}

.awg-post-single__meta {
	display:     flex;
	gap:         1rem;
	align-items: center;
	margin-top:  1.5rem;
	font-size:   0.85rem;
	color:       var(--text-muted, #777);
}

.awg-post-single__cat {
	color:           var(--color-primary, #cc3366);
	text-decoration: none;
}

.awg-post-single__cat:hover {
	text-decoration: underline;
}



/* ============================================================
   4. HP SHOWCASE — 3-column strip below the hero
   Col 1: orange polygon card (post 1)
   Col 2-3: plain text teasers (posts 2 & 3)
   ============================================================ */

/* ── Overlap the hero's bottom edge ─────────────────── */

.hp-showcase {
	width:      100%;
	position:   relative;
	z-index:    10;
	max-width:  1600px;
	margin-left:  auto;
	margin-right: auto;
	padding-left:  1rem;
	padding-right: 1rem;
}

.hp-showcase__grid {
	display: grid;
	grid-template-columns: 6fr 3fr 3fr;
	min-height: 360px;
	max-height: 420px;
	background: var(--bg-body, #fff);
}

/* ── Featured card (left) ────────────────────────────── */

.hp-showcase__primary {
	position:        relative;
	overflow:        hidden;
	display:         block;
	text-decoration: none;
	background-color: var(--ps-accent);
	background-size: cover;
	background-position: center right;
	/* rise above the grid's white background */
	margin-top: -80px;
	padding-top: 80px;
}

/* Smooth SVG-curve colour overlay — gentle S-curve right edge */
.hp-showcase__primary::before {
	content:    '';
	position:   absolute;
	inset:      0;
	background: var(--ps-accent);
	z-index:    1;
	clip-path:  url(#ps-leaf);
	/* mouse-out: plain ease-out — no overshoot, left edge stays put */
	transition: transform 0.45s ease-out;
	transform-origin: right center;
}

/* Hover: breathe the curve outward — spring only on the way IN */
.hp-showcase__primary:hover::before {
	transform:  scaleX(1.03);
	transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hp-showcase__primary-content {
	position:        relative;
	z-index:         2;
	width:           62%;        /* stay inside the polygon */
	height:          100%;
	padding:         0 2rem 2.5rem 2.5rem;
	display:         flex;
	flex-direction:  column;
	justify-content: space-between;
	color:           #fff;
}

.hp-showcase__arrow {
	display:     block;
	line-height: 1;
	flex-shrink: 0;
}

.hp-showcase__primary-title {
	font-family:   var(--font-heading);
	font-size:     clamp(1.15rem, 2vw, 1.75rem);
	font-weight:   300;
	line-height:   1.35;
	color:         #fff;
	margin:        auto 0;   /* vertically centres within flex-grow space */
	padding:       1.5rem 0;
	overflow-wrap: break-word;
	hyphens:       auto;
}

/* ── Shared "Read more" link ─────────────────────────── */

.hp-showcase__readmore {
	display:         inline-flex;
	align-items:     center;
	gap:             0.4rem;
	font-size:       0.875rem;
	font-weight:     500;
	text-decoration: none;
	color:           #fff;
	transition:      gap 0.2s ease;
}

.hp-showcase__primary:hover .hp-showcase__readmore,
.hp-showcase__secondary:hover .hp-showcase__readmore {
	gap: 0.7rem;
}

.hp-showcase__readmore-chevron {
	font-size: 1.1rem;
	line-height: 1;
}

/* ── Secondary text teasers (posts 2 & 3) ───────────── */

.hp-showcase__secondary {
	display:         flex;
	flex-direction:  column;
	justify-content: flex-end;
	padding:         2rem 2rem 2.5rem;
	text-decoration: none;
	color:           var(--text-main, #1a1a1b);
	border-left:     1px solid var(--border-light, #e0e0e0);
	transition:      background 0.2s ease;
}

/* Inline text-highlight on hover — follows each line's width */
.hp-showcase__secondary-title span {
	display:                  inline;
	background-color:         transparent;
	color:                    var(--text-heading, #000);
	padding:                  3px 8px;
	-webkit-box-decoration-break: clone;
	box-decoration-break:     clone;
	transition:               background-color 0.25s ease, color 0.25s ease;
}

.hp-showcase__secondary:hover .hp-showcase__secondary-title span {
	background-color: var(--ps-accent);
	color:            #fff;
}

a.hp-showcase__secondary:hover {
	text-decoration: none;
}

.hp-showcase__secondary-title {
	font-size:   clamp(0.95rem, 1.4vw, 1.15rem);
	font-weight: 300;
	line-height: 1.45;
	margin:      0 0 1.5rem;
	color:       var(--text-heading, #000);
}

.hp-showcase__secondary .hp-showcase__readmore {
	color: var(--text-main, #1a1a1b);
}


/* ============================================================
   5. HP NEWS — skyscraper + 2×2 card grid
   ============================================================ */

.hp-news {
	padding: 4rem 0 5rem;
}

/* ── Section header ──────────────────────────────────── */

.hp-news__header {
	display:         flex;
	align-items:     baseline;
	justify-content: space-between;
	margin-bottom:   2rem;
}

.hp-news__heading {
	font-family:    var(--font-heading);
	font-size:      clamp(2rem, 4.5vw, 3.25rem);
	font-weight:    300;
	letter-spacing: -0.03em;
	color:          var(--text-heading, #000);
	margin:         0;
}

.hp-news__seeall {
	display:         flex;
	align-items:     center;
	gap:             0.3rem;
	font-size:       0.9rem;
	font-weight:     500;
	text-decoration: none;
	color:           var(--text-main, #1a1a1b);
	white-space:     nowrap;
	transition:      color 0.2s ease;
}

.hp-news__seeall:hover {
	color: var(--ps-accent);
}

/* ── Main grid wrapper ───────────────────────────────── */

.hp-news__grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   3px;
	align-items:           stretch;
}

/* ── Skyscraper (left column) ────────────────────────── */

.hp-news__skyscraper {
	position:        relative;
	overflow:        hidden;
	display:         block;
	text-decoration: none;
	background:      var(--bg-alt, #e9ecef);
	min-height:      480px;
}

.hp-news__skyscraper > img {
	width:       100%;
	height:      100%;
	object-fit:  cover;
	display:     block;
	transition:  transform 0.55s ease;
}

.hp-news__skyscraper:hover > img {
	transform: scale(1.04);
}

/* Wave SVG — your exact path, closed into filled shape, sweeps up on hover */
.hp-news__skyscraper-wave {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     110%;   /* overshoot so the wave top clears the card edge */
	fill:       var(--ps-accent);
	z-index:    1;
	transform:  translateY(65%);
	transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.hp-news__skyscraper:hover .hp-news__skyscraper-wave {
	transform: translateY(-5%);  /* push past top edge — fully filled */
}

/* Text overlay — sits above the wave (z-index 2) */
.hp-news__skyscraper-overlay {
	position:        absolute;
	bottom:          0;
	left:            0;
	right:           0;
	padding:         2rem 2rem 1.75rem;
	background:      transparent;
	color:           #fff;
	z-index:         2;
}

.hp-news__date {
	display:     block;
	font-size:   0.78rem;
	font-weight: 400;
	opacity:     0.9;
	margin-bottom: 0.4rem;
	letter-spacing: 0.03em;
}

.hp-news__skyscraper-title {
	font-family: var(--font-heading);
	font-size:   clamp(1rem, 1.6vw, 1.4rem);
	font-weight: 300;
	line-height: 1.35;
	color:       #fff;
	margin:      0;
}

/* ── Side grid — 2×3 smaller cards ──────────────────── */

.hp-news__side-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   3px;
}

.hp-news__card {
	position:        relative;
	overflow:        hidden;
	display:         block;
	text-decoration: none;
	background:      var(--bg-alt, #e9ecef);
	aspect-ratio:    4 / 3;
}

.hp-news__card > img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.45s ease;
}

.hp-news__card:hover > img {
	transform: scale(1.06);
}

/* Gradient overlay + text at the bottom of each card */
.hp-news__card-overlay {
	position:   absolute;
	inset:      0;
	display:    flex;
	flex-direction: column;
	justify-content: flex-end;
	padding:    1rem 1rem 0.9rem;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.85) 0%,
		rgba(0, 0, 0, 0.55) 40%,
		rgba(0, 0, 0, 0.10) 70%,
		transparent         100%
	);
	color: #fff;
}

.hp-news__card-date {
	display:      block;
	font-size:    0.7rem;
	font-weight:  400;
	opacity:      0.85;
	margin-bottom: 0.25rem;
	letter-spacing: 0.03em;
}

.hp-news__card-title {
	font-family: var(--font-heading);
	font-size:   clamp(0.8rem, 1.1vw, 0.95rem);
	font-weight: 400;
	line-height: 1.35;
	color:       #fff;
	margin:      0;
}

/* Placeholder when no featured image is available */
.hp-news__img-placeholder {
	width:      100%;
	height:     100%;
	background: var(--bg-alt, #e9ecef);
}


/* ============================================================
   6. RESPONSIVE
   ============================================================ */

/* ── Tablet (≤ 1024px) ───────────────────────────────── */
@media (max-width: 1024px) {
	.hp-showcase__grid {
		grid-template-columns: 3fr 2fr 2fr;
	}

	.hp-showcase__primary-content {
		width: 70%;
	}
}

/* ── Small tablet / large phone (≤ 768px) ───────────── */
@media (max-width: 768px) {
	/* Stack showcase vertically */
	.hp-showcase__grid {
		grid-template-columns: 1fr;
		max-height: none;
	}

	.hp-showcase__primary {
		min-height: 280px;
	}

	/* On mobile the curve covers the full card — no right-edge cutoff */
	.hp-showcase__primary::before {
		clip-path: none;
		transition: none;
	}

	.hp-showcase {
		margin-top: 0;
	}

	.hp-showcase__primary {
		margin-top: 0;
		padding-top: 0;
	}

	.hp-showcase__primary-content {
		width:         100%;
		padding-top:   1.5rem;
		padding-bottom: 1.5rem;
	}

	.hp-showcase__secondary {
		border-left:  none;
		border-top:   1px solid var(--border-light, #e0e0e0);
		min-height:   120px;
	}

	/* Stack news grid */
	.hp-news__grid {
		grid-template-columns: 1fr;
	}

	.hp-news__skyscraper {
		aspect-ratio: 16 / 9;
		min-height:   260px;
	}
}

/* ── Phone (≤ 480px) ─────────────────────────────────── */
@media (max-width: 480px) {
	.hp-news__side-grid {
		grid-template-columns: 1fr;
	}

	.hp-news__card {
		aspect-ratio: 16 / 9;
	}
}


/* ============================================================
   7. PARENT THEME OVERRIDES
   ============================================================ */

/* Archive / gallery index — 5 columns desktop, 2 columns mobile.
   .container prefix raises specificity above parent portfolio.css which loads
   with no dependency declaration and can win the output order coin-flip. */
.container .portfolio-archive-grid {
	grid-template-columns: repeat(5, 1fr);
	gap: 0.75rem;
}

@media (max-width: 768px) {
	.container .portfolio-archive-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* ============================================================
   AWG ARCHIVE — contributors / models category grid
   (category.php in child theme)
   ============================================================ */

.awg-archive__header {
	padding:       2rem 0 1.5rem;
}

.awg-archive__title {
	font-size:      clamp( 1.5rem, 3vw, 2.5rem );
	font-weight:    300;
	letter-spacing: -0.02em;
	margin:         0 0 0.5rem;
}

.awg-archive__desc {
	color:     var(--text-muted, #777);
	font-size: 0.95rem;
	margin:    0;
}

/* ── Responsive grid ────────────────────────────────────── */

.awg-archive__grid {
	display:               grid;
	grid-template-columns: repeat( 5, 1fr );
	gap:                   1rem;
	margin-bottom:         3rem;
	align-items:           start; /* prevent taller cards from stretching their row-mates */
}

@media (max-width: 1024px) {
	.awg-archive__grid { grid-template-columns: repeat( 3, 1fr ); }
}

@media (max-width: 600px) {
	.awg-archive__grid { grid-template-columns: repeat( 2, 1fr ); gap: 0.6rem; }
}

/* ── Card ───────────────────────────────────────────────── */

.awg-archive__item {
	display:        flex;
	flex-direction: column;
	gap:            0.5rem;
}

.awg-archive__thumb-link {
	position:     relative;
	display:      block;
	aspect-ratio: 4 / 5;
	overflow:     hidden;
	border-radius: var( --radius, 4px );
	background:   var( --bg-alt, #f0f0f0 );
}

.awg-archive__thumb-img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.35s ease;
}

.awg-archive__thumb-link:hover .awg-archive__thumb-img {
	transform: scale( 1.04 );
}

.awg-archive__thumb-placeholder {
	width:      100%;
	height:     100%;
	background: var( --bg-alt, #f0f0f0 );
}

/* ── "NEW" badge ────────────────────────────────────────── */

.awg-archive__new-badge {
	position:       absolute;
	top:            10px;
	left:           10px;
	z-index:        5;
	padding:        3px 9px;
	background:     var( --color-primary, #cc3366 );
	color:          #fff;
	font-family:    var( --font-heading );
	font-size:      0.65rem;
	font-weight:    700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-radius:  2px;
	pointer-events: none;
	user-select:    none;
}

/* ── Item info ──────────────────────────────────────────── */

.awg-archive__info {
	display:        flex;
	flex-direction: column;
	gap:            0.15rem;
}

.awg-archive__name {
	font-family:     var( --font-heading );
	font-size:       0.9rem;
	font-weight:     400;
	color:           var( --color-primary, #cc3366 );
	text-decoration: none;
	line-height:     1.3;
	white-space:     nowrap;
	overflow:        hidden;
	text-overflow:   ellipsis;
}

.awg-archive__name:hover {
	text-decoration: underline;
}

.awg-archive__count {
	font-size: 0.8rem;
	color:     var( --text-muted, #888 );
}

/* ── Reduced motion ─────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
	.awg-archive__thumb-img { transition: none; }
}

/* ── Archive pagination — dot-pill style, arrows pinned left/right ──── */

.navigation.pagination .nav-links {
	display:         flex;
	align-items:     center;
	justify-content: center;
	position:        relative;
	gap:             6px;
	padding:         0 2.5rem;   /* space for absolutely-positioned arrows */
	min-height:      2rem;
}

/* Base pill — all page numbers and dots inherit this */
.navigation.pagination .page-numbers {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-width:       22px;
	height:          22px;
	padding:         0 7px;
	border-radius:   11px;
	font-size:       0.78rem;
	font-family:     var(--font-heading);
	font-weight:     400;
	line-height:     1;
	text-decoration: none;
	color:           var(--text-muted, #888);
	background:      rgba(0, 0, 0, 0.10);
	transition:      background 0.2s ease, color 0.2s ease, width 0.25s ease;
}

.navigation.pagination .page-numbers:hover {
	background: rgba(0, 0, 0, 0.20);
	color:      var(--text-main, #1a1a1b);
}

/* Current page — wider pill filled with brand colour */
.navigation.pagination .page-numbers.current {
	background:  var(--color-primary, #cc3366);
	color:       #fff;
	font-weight: 500;
	min-width:   34px;
}

/* Ellipsis — strip pill background */
.navigation.pagination .page-numbers.dots {
	background: none;
	cursor:     default;
	min-width:  auto;
	padding:    0 2px;
	font-size:  0.7rem;
	color:      rgba(0, 0, 0, 0.30);
}

/* Prev / next arrows — absolute left / right, no pill */
.navigation.pagination .prev.page-numbers,
.navigation.pagination .next.page-numbers {
	position:   absolute;
	top:        50%;
	transform:  translateY(-50%);
	background: none;
	min-width:  auto;
	padding:    0;
	font-size:  1rem;
	color:      var(--text-main, #1a1a1b);
}

.navigation.pagination .prev.page-numbers:hover,
.navigation.pagination .next.page-numbers:hover {
	background: none;
	color:      var(--color-primary, #cc3366);
}

.navigation.pagination .prev.page-numbers { left:  0; }
.navigation.pagination .next.page-numbers { right: 0; }

/* ── High-contrast overrides ─────────────────────────────────────────── */

body.high-contrast .navigation.pagination .page-numbers {
	background: transparent   !important; /* !important: overrides rgba fallback */
	border:     2px solid #000066 !important;
	color:      #000066       !important;
}

body.high-contrast .navigation.pagination .page-numbers.current {
	background: #000066 !important;
	color:      #fff    !important;
}

body.high-contrast .navigation.pagination .page-numbers.dots {
	border: none !important;
}

body.high-contrast .navigation.pagination .prev.page-numbers,
body.high-contrast .navigation.pagination .next.page-numbers {
	border:     none    !important;
	color:      #000066 !important;
	background: none    !important;
}

/* ── Reduced motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.navigation.pagination .page-numbers {
		transition: none;
	}
}

/* Slider arrow button positions (belt-and-suspenders over parent theme) */
.slider-arrow-prev {
	left:  1.5rem !important;
	right: auto  !important;
}

.slider-arrow-next {
	right: 1.5rem !important;
	left:  auto  !important;
}

/* Custom logo-link is replaced by .ass-brand in header.php; these guards are
   retained as a fallback in case the Customizer logo upload is ever used. */
.custom-logo-link img,
.custom-logo-link:hover img,
.custom-logo-link:focus img {
	transform:  none !important;
	box-shadow: none !important;
	filter:     none !important;
	opacity:    1    !important;
	transition: none !important;
}


/* ══════════════════════════════════════════════════════════════
   HIGH CONTRAST — ernesto-pf specific
   Hero slider layout is handled by shared-child-a11y.css.
   These rules convert hp-showcase and hp-news grids into plain
   vertical lists of horizontal cards (text left, image right).
   ══════════════════════════════════════════════════════════════ */

/* Description highlight: remove coloured background; underline instead */
body.high-contrast .slide-desc-hl {
	background-color: transparent     !important;
	color:            #000066         !important;
	text-decoration:  underline solid #000066 2px !important;
	padding:          0               !important;
}

/* ── hp-showcase → horizontal card list ────────────────────── */

/* Reset the showcase grid to a flex column */
body.high-contrast .hp-showcase__grid {
	display:               flex   !important;
	flex-direction:        column !important;
	gap:                   1rem   !important;
	grid-template-columns: none   !important;
}

/* Primary card: horizontal (text left, image right) */
body.high-contrast .hp-showcase__primary {
	display:        flex          !important;
	flex-direction: row           !important;
	min-height:     200px;
	background:     #FFF9E5       !important;
	border:         2px solid #000066 !important;
	clip-path:      none          !important;   /* remove polygon clip */
}

/* Primary card image → right 42% */
body.high-contrast .hp-showcase__primary::before {
	display: none !important;   /* remove polygon pseudo-element */
}

body.high-contrast .hp-showcase__primary-content {
	flex:       1       !important;
	order:      1       !important;
	position:   relative !important;
	color:      #000066 !important;
	padding:    1.5rem  !important;
}

body.high-contrast .hp-showcase__primary-title,
body.high-contrast .hp-showcase__primary .hp-showcase__readmore,
body.high-contrast .hp-showcase__primary .hp-showcase__arrow {
	color: #000066 !important;  /* now on light bg — navy text */
}

/* Secondary cards (right column) → each becomes a horizontal row */
body.high-contrast a.hp-showcase__secondary {
	display:        flex          !important;
	flex-direction: row           !important;
	min-height:     160px;
	background:     #FFF9E5       !important;
	border:         2px solid #000066 !important;
	box-shadow:     none          !important;
}

body.high-contrast .hp-showcase__secondary-title {
	flex:    1   !important;
	order:   1   !important;
	padding: 1.5rem !important;
}

/* Remove the hover highlight span background */
body.high-contrast .hp-showcase__secondary-title span,
body.high-contrast .hp-showcase__secondary:hover .hp-showcase__secondary-title span {
	background-color: transparent !important;
	color:            #000066     !important;
	padding:          0           !important;
}

/* ── hp-news → horizontal card list ────────────────────────── */

/* Reset the news grid to flex column */
body.high-contrast .hp-news__skyscraper,
body.high-contrast [class*="hp-news__grid"] {
	display:               flex   !important;
	flex-direction:        column !important;
	gap:                   1rem   !important;
	grid-template-columns: none   !important;
}

/* News/skyscraper cards: horizontal */
body.high-contrast [class*="hp-news__card"],
body.high-contrast [class*="hp-card"],
body.high-contrast .hp-news__skyscraper-card {
	display:        flex          !important;
	flex-direction: row           !important;
	min-height:     160px;
	box-shadow:     none          !important;
	outline:        2px solid #000066 !important;
	background:     #FFF9E5       !important;
}

body.high-contrast [class*="hp-news__card"] [class*="__img"],
body.high-contrast [class*="hp-card"] [class*="__img"],
body.high-contrast .hp-news__skyscraper-card [class*="__img"] {
	flex:         0 0 42% !important;
	order:        2       !important;
	aspect-ratio: auto    !important;
}

body.high-contrast [class*="hp-news__card"] [class*="__img"] img,
body.high-contrast [class*="hp-card"] [class*="__img"] img,
body.high-contrast .hp-news__skyscraper-card [class*="__img"] img {
	height:     100%;
	object-fit: cover;
}

body.high-contrast [class*="hp-news__card"] [class*="__body"],
body.high-contrast [class*="hp-card"] [class*="__body"] {
	flex:  1 !important;
	order: 1 !important;
}

/* @media (prefers-contrast: high) — mirrors body.high-contrast */
@media (prefers-contrast: high) {
	.slide-desc-hl {
		background-color: transparent !important;
		color:            #000066     !important;
		text-decoration:  underline solid #000066 2px !important;
		padding:          0 !important;
	}

	.hp-showcase__grid {
		display: flex !important;
		flex-direction: column !important;
		gap: 1rem !important;
	}

	.hp-showcase__primary {
		display: flex !important;
		flex-direction: row !important;
		background: #FFF9E5 !important;
		border: 2px solid #000066 !important;
		clip-path: none !important;
	}

	.hp-showcase__primary::before { display: none !important; }

	.hp-showcase__primary-title { color: #000066 !important; }

	a.hp-showcase__secondary {
		display: flex !important;
		flex-direction: row !important;
		background: #FFF9E5 !important;
		border: 2px solid #000066 !important;
		box-shadow: none !important;
	}

	.hp-showcase__secondary-title span,
	.hp-showcase__secondary:hover .hp-showcase__secondary-title span {
		background-color: transparent !important;
		color: #000066 !important;
		padding: 0 !important;
	}

	[class*="hp-news__card"],
	[class*="hp-card"] {
		display: flex !important;
		flex-direction: row !important;
		box-shadow: none !important;
		outline: 2px solid #000066 !important;
	}

	[class*="hp-news__card"] [class*="__img"],
	[class*="hp-card"] [class*="__img"] {
		flex: 0 0 42% !important;
		order: 2 !important;
		aspect-ratio: auto !important;
	}

	[class*="hp-news__card"] [class*="__body"],
	[class*="hp-card"] [class*="__body"] {
		flex: 1 !important;
		order: 1 !important;
	}
}