/* AER Site: Energy Projects filters. Values from the Projects design (controls 6px, cards 4px). */

/* Without JavaScript the filter band stays hidden and every card shows. */
html:not(.aer-pf-js) #aer-pf-band { display: none !important; }
.aer-pf-live [hidden], .aer-pf-more[hidden], #aer-pf-grid[hidden], #aer-pf-grid .e-loop-item[hidden], .aer-pf [hidden] { display: none !important; }

.aer-pf, .aer-pf-live, .aer-pf-more { font-family: inherit; color: #111827; }
.aer-pf button, .aer-pf input, .aer-pf select, .aer-pf-live button, .aer-pf-more button { font: inherit; }
.aer-pf :focus-visible, .aer-pf-live :focus-visible, .aer-pf-more :focus-visible { outline: 2px solid #01431D !important; outline-offset: 2px; }
.aer-pf-count:focus, .aer-pf-empty-h:focus { outline: none; }

/* Layout: desktop one row, tablet two columns with Status across, mobile stacked */
.aer-pf-row { display: flex; align-items: flex-end; gap: 16px; }
.aer-pf-field-status { flex: 0 0 360px; }
.aer-pf-field-country { flex: 0 0 340px; position: relative; }
.aer-pf-field-sector { flex: 0 0 280px; }
@media (max-width: 1024px) {
	.aer-pf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.aer-pf-field-status { grid-column: 1 / span 2; }
}
@media (max-width: 767px) {
	.aer-pf-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.aer-pf-field-status { grid-column: auto; }
}

.aer-pf-label { display: block; margin: 0 0 6px; font-size: 12px; line-height: 1.6; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #55606E; }

/* Hello Elementor's reset styles every button and input (pink border and text, 16px padding); these rules are scoped to outrank it. */
.aer-pf button, .aer-pf-live button, .aer-pf-more button { box-shadow: none; text-transform: none; letter-spacing: normal; text-decoration: none; }

/* Status tabs */
.aer-pf-tabs { display: flex; gap: 4px; box-sizing: border-box; height: 52px; padding: 4px; background: #F4F5F3; border-radius: 6px; }
.aer-pf .aer-pf-tab { flex: 1 1 0; min-width: 0; height: 44px; border: 0; border-radius: 4px; padding: 0 4px; background: transparent; font-size: 14px; font-weight: 600; line-height: 1; color: #111827; cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s; }
.aer-pf .aer-pf-tab:hover { background: #E2E7E3; }
.aer-pf .aer-pf-tab[aria-pressed="true"], .aer-pf .aer-pf-tab[aria-pressed="true"]:hover { background: #01431D; color: #FFFFFF; }
@media (max-width: 767px) { .aer-pf .aer-pf-tab { padding: 0 2px; } }

/* Country button and native sector select */
.aer-pf .aer-pf-select, .aer-pf .aer-pf-native { display: flex; align-items: center; gap: 10px; width: 100%; height: 52px; box-sizing: border-box; border: 1px solid #55606E; border-radius: 6px; background: #FFFFFF; padding: 0 14px; font-size: 15px; font-weight: 500; line-height: 1.2; color: #111827; cursor: pointer; transition: border-color .2s; }
.aer-pf .aer-pf-select:hover, .aer-pf .aer-pf-native:hover { border-color: #01431D; }
.aer-pf-select-text { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aer-pf-caret { font-size: 13px; line-height: 1; color: #01431D; }
.aer-pf-native-wrap { position: relative; display: block; }
.aer-pf .aer-pf-native { display: block; appearance: none; -webkit-appearance: none; padding: 0 34px 0 14px; }
.aer-pf-native-wrap .aer-pf-caret { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.aer-pf-flag { display: block; flex: 0 0 21px; width: 21px; height: 14px; box-sizing: border-box; border: 1px solid #DDE2DD; object-fit: cover; }

/* Country panel */
.aer-pf-panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; box-sizing: border-box; background: #FFFFFF; border: 1px solid #DDE2DD; border-radius: 4px; box-shadow: 0 10px 28px rgba(1, 67, 29, 0.14); padding: 8px; }
.aer-pf .aer-pf-search { transition: none; display: block; width: 100%; box-sizing: border-box; height: 44px; border: 1px solid #55606E; border-radius: 4px; background: #FFFFFF; padding: 0 12px; font-size: 14px; color: #111827; }
.aer-pf-list { margin-top: 6px; max-height: 264px; overflow-y: auto; }
.aer-pf-opt { display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box; border-radius: 4px; padding: 0 12px; font-size: 14px; line-height: 1.3; color: #111827; background: #FFFFFF; cursor: pointer; }
.aer-pf-opt:hover { background: #F4F5F3; }
.aer-pf-opt-text { flex: 1; }
.aer-pf-check { visibility: hidden; }
.aer-pf-opt[aria-selected="true"] { color: #01431D; font-weight: 600; background: #F4F5F3; }
.aer-pf-opt[aria-selected="true"] .aer-pf-check { visibility: visible; }
.aer-pf-opt.is-active { outline: 2px solid #01431D; outline-offset: -2px; }
.aer-pf-nomatch { margin: 0; padding: 12px; font-size: 14px; color: #55606E; }

/* Count line, Clear filters */
.aer-pf-count-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 16px; }
.aer-pf-count { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: #111827; font-variant-numeric: tabular-nums; }
.aer-pf-live .aer-pf-clear { display: inline-flex; align-items: center; min-height: 44px; border: 0; background: transparent; padding: 0; font-size: 14px; font-weight: 600; color: #01431D; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color .2s; }
.aer-pf-live .aer-pf-clear:hover { color: #2D7D4F; }
@media (max-width: 767px) { .aer-pf-count { font-size: 18px; } }

/* Green buttons: Load more and the empty state's Clear filters */
.aer-pf-live .aer-pf-btn, .aer-pf-more .aer-pf-btn { display: inline-block; min-height: 46px; border: 0; border-radius: 6px; background: #01431D; padding: 13px 28px; font-size: 14px; font-weight: 600; line-height: 1.4; color: #FFFFFF; cursor: pointer; transition: background-color .2s; }
.aer-pf-live .aer-pf-btn:hover, .aer-pf-more .aer-pf-btn:hover { background: #2D7D4F; }

/* Load more */
.aer-pf-more { margin-top: 32px; text-align: center; }
.aer-pf-shown { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: #55606E; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .aer-pf-more .aer-pf-btn { width: 100%; } }

/* Empty state */
.aer-pf-empty { box-sizing: border-box; background: #FFFFFF; border: 1px solid #E2E7E3; border-radius: 4px; padding: 64px 40px; text-align: center; }
/* Live site H2: 50/60px weight 400 at desktop and tablet, 25/35px at mobile */
.aer-pf-empty-h { margin: 0; font-size: 50px; line-height: 60px; font-weight: 400; letter-spacing: normal; color: #111827; }
.aer-pf-empty-p { margin: 10px auto 0; max-width: 440px; font-size: 15px; line-height: 1.6; color: #55606E; }
.aer-pf-empty .aer-pf-btn { margin-top: 20px; padding: 13px 22px; }
@media (max-width: 1024px) { .aer-pf-empty { padding: 48px 32px; } }
@media (max-width: 767px) { .aer-pf-empty { padding: 36px 20px; } .aer-pf-empty-h { font-size: 25px; line-height: 35px; } }

/* Every state set explicitly, so Hello Elementor's reset (#c36 on button:hover/:focus) never shows.
   Order matters: focus first, then hover and active, so a hovered focused control shows its hover. */
.aer-pf .aer-pf-tab:not([aria-pressed="true"]):focus { background: transparent; color: #111827; }
.aer-pf .aer-pf-tab:not([aria-pressed="true"]):hover, .aer-pf .aer-pf-tab:not([aria-pressed="true"]):active { background: #E2E7E3; color: #111827; }
.aer-pf .aer-pf-tab[aria-pressed="true"]:focus, .aer-pf .aer-pf-tab[aria-pressed="true"]:active { background: #01431D; color: #FFFFFF; }
.aer-pf .aer-pf-select:focus { background: #FFFFFF; color: #111827; border-color: #55606E; }
.aer-pf .aer-pf-select:hover, .aer-pf .aer-pf-select:active, .aer-pf .aer-pf-select[aria-expanded="true"] { background: #FFFFFF; color: #111827; border-color: #01431D; }
.aer-pf .aer-pf-search:hover, .aer-pf .aer-pf-search:focus, .aer-pf .aer-pf-search:active { background: #FFFFFF; color: #111827; border-color: #55606E; }
.aer-pf-live .aer-pf-clear:focus { background: transparent; color: #01431D; }
.aer-pf-live .aer-pf-clear:hover, .aer-pf-live .aer-pf-clear:active { background: transparent; color: #2D7D4F; }
.aer-pf-live .aer-pf-btn:focus, .aer-pf-more .aer-pf-btn:focus { background: #01431D; color: #FFFFFF; }
.aer-pf-live .aer-pf-btn:hover, .aer-pf-live .aer-pf-btn:active, .aer-pf-more .aer-pf-btn:hover, .aer-pf-more .aer-pf-btn:active { background: #2D7D4F; color: #FFFFFF; }