/**
* Theme Name: AWARE
* Description: Child theme of Sosso for the AWARE project (Water4All / Horizon Europe).
* Author: HMU
* Template: sosso-aware
* Version: 1.4.3
* Text Domain: aware
*/

/* ============================================================
   1. PALETTE
   ------------------------------------------------------------
   Every value below was measured against its intended background
   before being adopted. Contrast ratios are recorded inline; do
   not swap a colour without re-measuring, because several of these
   are only just over the line.

   Sosso's own brand colour is #6cbe03 with a #f4a700 secondary,
   both hardcoded ~60 times in the parent style.css. Section 3
   overrides every one of those rules. Adding a new Sosso widget
   to a page may surface a lime accent this sheet does not yet
   cover -- grep the parent sheet for #6cbe03 and extend section 3.
   ============================================================ */

:root {
    /* Taken from the AWARE logo: a water drop in deep-to-sky blue around
       three circles -- LCA green, LCC blue, S-LCA teal. The logo's own
       sky, teal and green are all under 3:1 on white, so they are kept
       for fills only and darker shades of the same hues carry text. */

    /* Blue -- the drop and the "AW" of the wordmark. */
    --aw-primary:      #0B5CAD;  /* 6.67:1 on white. Links, buttons, icons. */
    --aw-primary-deep: #083F84;  /* 10.22:1 on white. Hover / pressed; menu bar. */
    --aw-fill:         #3CA8E4;  /* 2.65:1 -- NON-TEXT ONLY. Logo sky blue. */

    /* Teal -- the S-LCA circle and the "RE" of the wordmark. The accent. */
    --aw-accent:       #00786F;  /* 5.36:1 on white. */
    --aw-accent-deep:  #005A53;  /* 8.12:1 on white. Hover. */
    --aw-teal-fill:    #00A89C;  /* 2.97:1 -- NON-TEXT ONLY. Logo teal. */

    /* Green -- the LCA circle. Used sparingly, as the third dimension. */
    --aw-green:        #3F7A12;  /* 5.24:1 on white. */
    --aw-green-fill:   #62A824;  /* 2.94:1 -- NON-TEXT ONLY. Logo green. */

    /* Dark -- header info bar, footer, overlays. */
    --aw-dark:         #0B2A4A;  /* white on this = 14.54:1 */
    --aw-dark-2:       #081F38;  /* footer copyright strip */

    /* Tints for alternating sections. */
    --aw-light:        #E6F1FA;  /* --aw-primary on this = 5.82:1 */
    --aw-light-2:      #E3F4F2;  /* --aw-accent-deep on this = 7.15:1 */

    /* Text. */
    --aw-ink:          #0F1E2E;  /* headings on white */
    --aw-muted:        #4F5F70;  /* 6.56:1 on white. Meta, captions. */
    --aw-on-dark:      #E4EEF7;  /* 12.37:1 on --aw-dark. Footer body copy. */

    /* Official EU emblem blue. Used only for the funding focus ring. */
    --aw-eu-blue:      #004494;
}

/* ============================================================
   2. TYPOGRAPHY
   ------------------------------------------------------------
   Up to six languages, one of which is Greek. Poppins -- Sosso's
   heading face -- covers Latin and Devanagari only, so Greek and
   Hebrew headings would silently fall back to a system face and
   look unrelated to the rest of the site. Open Sans covers latin,
   latin-ext, greek, greek-ext and hebrew, so it is the safe base
   and the explicit fallback for those two scripts.

   Fonts are self-hosted (see section 9 note in functions.php).
   Do not reintroduce fonts.googleapis.com: serving them from
   Google leaks visitor IPs to a third country, which is the exact
   practice the Munich Regional Court ruled unlawful in 2022.
   ============================================================ */

:root {
    --aw-font-body: "Open Sans", "Noto Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --aw-font-head: "Poppins", "Open Sans", "Noto Sans", "Segoe UI", system-ui, sans-serif;
}

body,
p, li, td, th,
input, select, textarea, button {
    font-family: var(--aw-font-body);
}

h1, h2, h3, h4, h5, h6,
.title, .sub-title {
    font-family: var(--aw-font-head);
    color: var(--aw-ink);
}

/* Poppins has no Greek or Hebrew glyphs. Push those languages to
   Open Sans for headings too rather than letting the browser pick. */
:lang(el) h1, :lang(el) h2, :lang(el) h3,
:lang(el) h4, :lang(el) h5, :lang(el) h6, :lang(el) .title,
:lang(he) h1, :lang(he) h2, :lang(he) h3,
:lang(he) h4, :lang(he) h5, :lang(he) h6, :lang(he) .title {
    font-family: "Open Sans", "Noto Sans Hebrew", "Noto Sans", sans-serif;
}

/* Greek does not accent capitals. The theme uppercases several
   elements, which produces incorrect Greek (ΆΝΩ instead of ΑΝΩ)
   and, worse, changes how a screen reader pronounces them. */
:lang(el) .klb-custom-title span,
:lang(el) .sub-title,
:lang(el) .klb-btn,
:lang(el) .footer-area .footer-list .title,
:lang(el) button[type="submit"],
:lang(el) input[type="submit"] {
    text-transform: none;
}

/* ============================================================
   2b. ELEMENTOR GLOBAL KIT
   ------------------------------------------------------------
   Elementor kit 10 is still carrying the stock demo palette --
   #6EC1E4 light blue, #61CE70 green, Roboto / Roboto Slab. It is
   not decorative: the generated per-page CSS wires those globals
   into real widgets, e.g.

     .elementor-widget-heading .elementor-heading-title {
         font-family: var(--e-global-typography-primary-font-family);
         color: var(--e-global-color-primary);
     }

   so every heading and image-box title on the site renders in
   Elementor's demo blue, and requests Roboto -- which section 9
   of functions.php dequeues, so it silently falls back.

   Redefining the four globals here retints every Elementor widget
   at once. This works because the child stylesheet is enqueued
   AFTER uploads/elementor/css/post-*.css (verified in the served
   page); the selector specificity is identical, so load order is
   what decides. If Elementor is ever made to load later, these
   need the kit class rather than the attribute selector.

   The proper home for this is the kit itself (Elementor ->
   Site Settings), which would also fix the editor UI. The kit is
   an elementor_library post and is not writable over REST, so it
   lives here until someone sets it in wp-admin.
   ============================================================ */

:root,
[class*="elementor-kit-"] {
    --e-global-color-primary:   #0B5CAD;  /* headings, image-box titles */
    --e-global-color-secondary: #0B2A4A;
    --e-global-color-text:      #4F5F70;
    --e-global-color-accent:    #00786F;

    --e-global-typography-primary-font-family:   "Poppins", "Open Sans", "Noto Sans", sans-serif;
    --e-global-typography-secondary-font-family: "Open Sans", "Noto Sans", sans-serif;
    --e-global-typography-text-font-family:      "Open Sans", "Noto Sans", sans-serif;
    --e-global-typography-accent-font-family:    "Open Sans", "Noto Sans", sans-serif;
}

/* Greek and Hebrew have no Poppins glyphs -- keep them on Open Sans
   here too, or Elementor headings fall back to an unrelated system face
   while the rest of the page stays consistent. */
:lang(el), :lang(he) {
    --e-global-typography-primary-font-family: "Open Sans", "Noto Sans Hebrew", "Noto Sans", sans-serif;
}

/* ============================================================
   2c. CONTENT ALIGNMENT WITH THE THEME CONTAINER
   ------------------------------------------------------------
   Elementor content sat 25px further right than the header and
   the menu. The two use different containers:

     header   .container          max-width 1200px, padding 0 15px
                                  (sosso ships a MODIFIED Bootstrap
                                  4.3.1 -- stock is 1140px here)
     content  .elementor-container max-width 1140px, padding 0

   Header text therefore starts 15px inside a 1200px box, while
   Elementor content starts 10px (the column's own padding) inside
   a 1140px box: (1200-1140)/2 + 10 - 15 = 25px of drift.

   Matching Bootstrap's breakpoints exactly and leaving 5px of
   container padding puts widget text at 5 + 10 = 15px, and makes
   the content column 1170px wide -- identical to the header on
   both counts. Do not "simplify" the 5px away.
   ============================================================ */

body .elementor-section.elementor-section-boxed > .elementor-container {
    width: 100%;
    padding-left: 5px;
    padding-right: 5px;
}

@media (min-width: 576px) {
    body .elementor-section.elementor-section-boxed > .elementor-container { max-width: 540px; }
    body .e-con { --container-max-width: 540px; }
}

@media (min-width: 768px) {
    body .elementor-section.elementor-section-boxed > .elementor-container { max-width: 720px; }
    body .e-con { --container-max-width: 720px; }
}

@media (min-width: 992px) {
    body .elementor-section.elementor-section-boxed > .elementor-container { max-width: 960px; }
    body .e-con { --container-max-width: 960px; }
}

@media (min-width: 1200px) {
    body .elementor-section.elementor-section-boxed > .elementor-container { max-width: 1200px; }
    body .e-con { --container-max-width: 1200px; }
}

/* ============================================================
   3. BRAND RETINT
   ------------------------------------------------------------
   One-for-one replacement of the parent theme's 55 rules that
   hardcode #6cbe03 / #f4a700 / #b0b302. Selectors are copied
   verbatim from sosso/style.css so specificity matches; the child
   sheet loads after the parent, so no !important is needed.
   ============================================================ */

/* --- links --- */
a                                       { color: var(--aw-primary); }
a:hover                                 { color: var(--aw-accent); }

/* --- gradient buttons (blue -> teal, the logo's wordmark, replacing green -> amber) --- */
input[type="submit"],
button[type="submit"],
.klb-subscribe input[type="submit"],
.klb-shop-details-content button.single_add_to_cart_button,
.wc-proceed-to-checkout a.checkout-button,
.return-to-shop a.button.wc-backward {
    background: linear-gradient(120deg, var(--aw-primary) 40%, var(--aw-accent) 100%);
}

button[type="submit"]:before,
.klb-shop-details-content button.single_add_to_cart_button:before,
.wc-proceed-to-checkout a.checkout-button:before,
.return-to-shop a.button.wc-backward:before {
    background: var(--aw-primary-deep);
}

/* --- accent bars and underlines --- */
.klb-faq.faq-content span:before,
.klb-sponsor.sponsor-box span::before,
.klb-subscribe.newsletters-box span::before,
.klb-single-image:before,
.klb-custom-title span:before,
.klb-btn-text:before,
.woocommerce-tabs ul.nav li.active a:before,
.related.products h2:before,
.woocommerce-form-coupon-toggle:before,
form.checkout_coupon.woocommerce-form-coupon:before,
.klb-contact-form h3.title:before,
.klb-contact-form h3.title:after,
.blog-massage h3.comment-reply-title:before,
.blog-massage h3.comment-reply-title:after,
section.up-sells > h2:before,
.cart-area .cart-collaterals .cross-sells h2:before {
    background: var(--aw-primary);
}

/* --- accent text --- */
.star-rating,
.feedback-area .feedback-active .slick-arrow,
.klb-faq.faq-content span,
.klb-sponsor.sponsor-box span,
.klb-subscribe.newsletters-box span,
.klb-subscribe .input-box i,
.klb-custom-title span,
.klb-btn-text,
.klb-icon-box2.what-we-do-item i,
.klb-shop-details-content a.woocommerce-review-link,
.woocommerce-tabs ul.nav li.active a,
.klb-shop-details-content .product_meta,
.woocommerce-form-coupon-toggle a.showcoupon,
.klb-contact-form .input-box i,
ul.post-meta li i,
button.klb-search.search-button {
    color: var(--aw-primary);
}

/* The parent puts the contact icons in amber, the only place it uses
   #f4a700 for text. Amber on white is 2.1:1 and fails outright. */
.klb-contact-icon-box.contact-info-item i {
    color: var(--aw-accent);
}

/* --- hover states --- */
.klb-team-box.farmers-item .farmers-overlay .item ul li a:hover,
.blog-comments-item a.comment-reply-link:hover {
    color: var(--aw-accent);
}

/* The footer icon travelled with its label to --aw-accent on hover, which is
   2.56:1 on --aw-dark -- darker than its 10.16:1 resting state and under the
   3:1 floor for a non-text component. It now matches sosso_font_hover_color,
   so the icon and the label it belongs to move together. */
.footer-area .footer-list ul li a:hover i {
    color: #fff;
}

.tagcloud a:hover,
.klb-post .klb-pagination a:hover {
    background: var(--aw-primary);
    border-color: var(--aw-primary);
    color: #fff;
}

/* --- current / active states --- */
ul.page-numbers li span.page-numbers.current,
.klb-post .klb-pagination span.current,
ul li.woocommerce-MyAccount-navigation-link.is-active a {
    border-color: var(--aw-primary);
    background: var(--aw-primary);
    color: #fff;
}

.elementor-tab-title.elementor-active a.elementor-accordion-title {
    border-bottom: 2px solid var(--aw-primary);
}

/* --- decorative fills. Non-text, so the logo's light sky blue is allowed. --- */
.klb-counter2 > span {
    border: 7px solid var(--aw-fill);
}

.klb-icon-box.features-items .item i {
    background: var(--aw-fill);
}

.klb-icon-box.features-items .item i::after {
    background-image: linear-gradient(-49deg, var(--aw-fill) 0%, var(--aw-primary) 55%, var(--aw-accent) 100%);
}

/* ============================================================
   4. CHROME -- header bar, menu, footer
   ------------------------------------------------------------
   The header bar, menu bar, question box and footer colours are
   NOT here. They are native Customizer values, written by
   scratchpad/chrome_colors.py and listed in PROJECT.md §12.

   They have to be. sosso-core prints them into an inline <style>
   in wp_head that is emitted AFTER this stylesheet, so any rule
   here duplicating one of them loses the moment someone opens
   Appearance -> Customise -> Header Settings and hits Publish --
   silently, and only for the settings they happened to touch.

   What is left below has no Customizer field behind it: the
   footer's base text colour, its icons, the back-to-top button
   this theme's footer.php replaces, and the skip link.
   ============================================================ */

/* The footer's own text colour. sosso_font_color covers the widget links
   and sosso_copyright_style the copyright line, but nothing native paints
   the element itself, so the funding strip and the disclaimer -- which are
   this theme's markup, not the parent's -- would inherit the demo grey. */
.footer-area,
.footer-area p                                  { color: var(--aw-on-dark); }

/* Icons are non-text UI components: the bar is 3:1 (WCAG 1.4.11).
   This clears 4.5:1 regardless. */
.footer-area .footer-list ul li i,
.footer-area .footer-info i                     { color: var(--aw-on-dark); }

/* footer.php replaces the parent's <a href=""> with a <button>, so the
   parent's `.back-to-top a` rules no longer match anything. These restate
   the theme's own appearance on the button and strip the UA defaults. */
.back-to-top a,
.back-to-top button {
    background: linear-gradient(135deg, var(--aw-primary) 30%, var(--aw-accent) 100%);
}

.back-to-top button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    appearance: none;
}

.back-to-top button:hover {
    background: linear-gradient(135deg, var(--aw-primary-deep) 30%, var(--aw-accent-deep) 100%);
}

/* Skip link: present for assistive technology at all times, and visible for
   sighted keyboard users the moment it takes focus. Without the focus rule
   it exists but no one can see where their focus went. */
.aw-skip-link:focus {
    position: fixed !important;
    top: 8px;
    inset-inline-start: 8px;
    z-index: 10000;
    width: auto;
    height: auto;
    margin: 0;
    padding: 10px 18px;
    clip: auto;
    clip-path: none;
    background: #fff;
    color: var(--aw-primary-deep);
    font-weight: 600;
    border-radius: 3px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    outline: 3px solid var(--aw-accent);
    outline-offset: 2px;
}

/* The landmark is focus-target only; never show a ring around the whole page. */
#aw-main:focus { outline: none; }

/* ============================================================
   5. SECTION TINTS
   ============================================================ */

.aw-tint     { background-color: var(--aw-light); }
.aw-tint-2      { background-color: var(--aw-light-2); }

/* ============================================================
   6. EU / WATER4ALL VISIBILITY
   ------------------------------------------------------------
   Rendered by footer.php on every page. Horizon Europe requires
   the EU emblem plus the funding statement on all communication
   material; the Water4All partnership logo sits alongside it at
   the same optical height. The emblem is never rescaled
   disproportionately and never recoloured -- use the official NEG
   variant here because the footer is dark.
   ============================================================ */

.footer-area .aw-funding-strip {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 22px 0 6px;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

.footer-area .aw-funding-strip img {
    height: 56px;
    width: auto;
    max-width: 100%;
    display: block;
}

.footer-area .aw-funding-strip .aw-project-ref {
    margin: 0;
    font-size: 13px;
    letter-spacing: .02em;
    color: #fff;              /* not --aw-on-dark: this is small text */
    white-space: nowrap;
}

.footer-area .aw-disclaimer {
    margin: 14px 0 0;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--aw-on-dark);
    max-width: 78ch;
}

@media (max-width: 575px) {
    .footer-area .aw-funding-strip      { gap: 16px; padding-top: 18px; }
    .footer-area .aw-funding-strip img  { height: 44px; }
    .footer-area .aw-funding-strip .aw-project-ref { white-space: normal; }
}

/* --- sticky co-funded badge, bottom corner ---
   Hidden once the footer scrolls into view, otherwise it covers the
   funding strip it duplicates. The toggle is an IntersectionObserver
   in footer.php; this is only the presentation. */

.aw-cofunded-badge {
    position: fixed;
    bottom: 18px;
    inset-inline-start: 18px;   /* logical: flips for Hebrew automatically */
    z-index: 900;
    display: block;
    background: #fff;
    padding: 6px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    transition: opacity .25s ease, transform .25s ease;
}

.aw-cofunded-badge img { height: 40px; width: auto; display: block; }

.aw-cofunded-badge:focus-visible {
    outline: 3px solid var(--aw-eu-blue);
    outline-offset: 2px;
}

.aw-cofunded-badge.is-hidden {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}

@media (max-width: 991px) {
    .aw-cofunded-badge         { bottom: 12px; inset-inline-start: 12px; }
    .aw-cofunded-badge img     { height: 30px; }
}

/* ============================================================
   7. LANGUAGE SWITCHER
   ------------------------------------------------------------
   Six languages is too many for the hover-reveal strip pattern
   the theme assumes, so this is a proper disclosure: a button that
   opens a two-column panel.

   Inactive options are CLIPPED, never display:none. With
   display:none the options are removed from the tab order, so
   :focus-within never fires and a keyboard user can open the panel
   but not reach anything inside it.
   ============================================================ */

.aw-lang {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

/* The top bar is white (it carries the logo), so the toggle is dark-on-white.
   Border is --aw-muted: 6.56:1, clear of the 3:1 floor for a UI component. */
.aw-lang__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--aw-muted);
    border-radius: 3px;
    padding: 6px 12px;
    color: var(--aw-ink);
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
}

.aw-lang__toggle:hover    { border-color: var(--aw-primary); color: var(--aw-primary); }

.aw-lang__toggle:focus-visible,
.aw-lang__panel a:focus-visible {
    outline: 3px solid var(--aw-accent);
    outline-offset: 2px;
}

.aw-lang__toggle .aw-lang__caret {
    font-size: 10px;
    transition: transform .2s ease;
}

.aw-lang__toggle[aria-expanded="true"] .aw-lang__caret {
    transform: rotate(180deg);
}

/* Round flags, shipped as 48px PNGs and drawn at 24px so they stay crisp on
   a 2x display. They are decorative only -- the language name sits next to
   every one of them in text, which is what actually conveys the meaning.
   A flag is a country, not a language; the label is doing the work, which is
   also why it/pt/tr can ship without a flag for now. */
.aw-lang img {
    width: 24px;
    height: 24px;
    display: inline-block;
    border-radius: 50%;
    flex: 0 0 auto;
    object-fit: cover;
    /* Keeps light flags (Israel, Czechia) from dissolving into a white panel. */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

/* Placeholder for a language we ship no flag for, so its label still lines up
   with the rest of the column instead of shifting left. */
.aw-lang__noflag {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    display: inline-block;
    border-radius: 50%;
    background: rgba(0, 0, 0, .06);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10);
}

/* --- header logo ---
   The AWARE logo is a horizontal lockup (drop + wordmark + tagline) built
   from the brief's stacked logo; 216x64 is set as sosso_logo_size. The
   parent caps .logo img at a height sized for its own 40px wordmark. */
.header-area .header-info .logo img {
    height: 64px;
    width: auto;
    max-width: none;
}
@media (max-width: 575px) {
    .header-area .header-info .logo img { height: 48px; }
}

/* Flaticon attribution in the footer copyright strip. Required by the
   licence, so it must stay legible -- 4.5:1 on the dark strip, not a
   decorative grey. */
.footer-area .aw-credits {
    margin: 0;
    font-size: 12px;
    color: var(--aw-on-dark);
}

.footer-area .aw-credits a {
    color: #fff;
    text-decoration: underline;
}

.aw-lang__panel {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 6px);
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 2px 10px;
    background: #fff;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
    margin: 0;
    list-style: none;

    /* clipped, not removed -- see the note above */
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.aw-lang__panel.is-open,
.aw-lang:focus-within .aw-lang__panel {
    clip-path: none;
    height: auto;
    overflow: visible;
    opacity: 1;
}

.aw-lang__panel li { margin: 0; }

.aw-lang__panel a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 3px;
    font-size: 14px;
    color: var(--aw-ink);
    text-decoration: none;
    white-space: nowrap;
}

.aw-lang__panel a:hover        { background: var(--aw-light); color: var(--aw-primary-deep); }
.aw-lang__panel a[aria-current="true"] {
    background: var(--aw-light);
    font-weight: 600;
}

@media (max-width: 767px) {
    .aw-lang__panel {
        position: fixed;
        inset-inline: 12px;
        inset-inline-end: 12px;
        top: auto;
        bottom: 12px;
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   8. ACCESSIBILITY UTILITIES
   ============================================================ */

/* Available to assistive technology, invisible on screen. Used for
   the accessible names of icon-only links, which are rendered
   server-side so that checkers that do not run JavaScript see them. */
.aw-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The theme leaves focus unstyled on several interactive elements. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--aw-accent);
    outline-offset: 2px;
}

/* .header-info is white now, so it keeps the default teal ring. */
.footer-area a:focus-visible,
.header-menu a:focus-visible {
    outline-color: #fff;
}

/* The theme renders an empty contact row as <a href=""><i class="fal fa-"></i></a>
   when its Customizer field is blank -- an empty link sitting in the
   tab order with no accessible name. Remove it rather than style it. */
.header-info .header-info-item .item:empty,
.header-info .header-info-item .item a[href=""],
.footer-area .footer-info li a[href=""] {
    display: none;
}

/* ============================================================
   9. ICON FONTS
   ------------------------------------------------------------
   Anything that forces font-family on a broad selector destroys
   icon fonts, because `inherit` resolves to the body face and every
   glyph turns into a blank box. Section 2 deliberately lists real
   families rather than `inherit`; these rules re-assert the icon
   families in case an Elementor global or a plugin does otherwise.

   Specificity matters here: i[class*="fa-"]::before is (0,1,2) and
   outranks .fab::before at (0,1,1), so brand icons break unless the
   broad rule excludes them.
   ============================================================ */

i[class*="fa-"]:not(.fab):not(.fa-brands)::before,
.fa::before, .fas::before, .far::before, .fal::before {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro" !important;
}

.fab::before, .fa-brands::before {
    font-family: "Font Awesome 5 Brands" !important;
}

[class^="flaticon-"]::before,
[class*=" flaticon-"]::before {
    font-family: "Flaticon" !important;
}

.dashicons, .dashicons-before::before {
    font-family: dashicons !important;
}

/* ============================================================
   13. IMPACT PAGE
   ------------------------------------------------------------
   Per dissemination channel: icon + title + blurb on the left,
   year-grouped item list on the right.
   ============================================================ */

.aw-impact {
    padding: 34px 0;
    scroll-margin-top: 90px;
}

.aw-impact + .aw-impact {
    border-top: 1px solid #e3e9f0;
}

.aw-impact .elementor-icon-box-icon i {
    font-size: 46px;
    color: var(--aw-primary);
}

.aw-impact .elementor-icon-box-title {
    margin: 12px 0 6px;
    font-size: 22px;
}

.aw-impact .elementor-icon-box-description {
    color: var(--aw-muted);
    font-size: 14.5px;
    line-height: 1.6;
}

/* Year headings within a channel's item list. */
.aw-impact-list-wrap h3 {
    margin: 22px 0 10px;
    font-size: 22px;
}

.aw-impact-list-wrap h3:first-child { margin-top: 0; }

.aw-impact-list {
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
}

.aw-impact-list li {
    position: relative;
    padding: 4px 0 4px 26px;
    line-height: 1.55;
}

/* File-type marker. The reference site uses a PDF or link glyph per row;
   this is the same idea driven by a class on the <li> so the markup stays
   simple when items are added by hand later. */
.aw-impact-list li::before {
    content: "\f0c1";                     /* fa-link */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    inset-inline-start: 0;
    top: 5px;
    font-size: 13px;
    color: var(--aw-accent);
}

.aw-impact-list li.is-pdf::before {
    content: "\f1c1";                     /* fa-file-pdf */
    color: #c0392b;
}

.aw-impact-list a { text-decoration: none; }
.aw-impact-list a:hover { text-decoration: underline; }

/* Empty state. Six unexplained blank columns look like a broken page; an
   explicit line reads as "not yet", which is the truth. */
.aw-impact-empty {
    padding: 18px 20px;
    border: 1px dashed #ccd8e5;
    border-radius: 5px;
    background: rgba(11, 92, 173, .03);
    color: var(--aw-muted);
    font-size: 14px;
}

/* ============================================================
   12. STUDY CASES PAGE
   ------------------------------------------------------------
   Map plus one row per study case. The rows are the real
   content -- the map is a navigation aid, and every pin scrolls
   to the matching row.
   ============================================================ */

.aw-case-map-wrap {
    margin: 0 0 34px;
}

#aw-case-map {
    width: 100%;
    height: 460px;
    border-radius: 6px;
    background: var(--aw-light-2);
    border: 1px solid #d5dfea;
}

/* Before Leaflet initialises -- or if it never does, because the script is
   blocked -- the container would be an unexplained empty box. The message
   sits underneath and is covered the moment the map draws over it. */
#aw-case-map:not(.is-live)::after {
    content: "Map of the AWARE study cases: Hersonissos (Crete), Lisbon, Campinas, ÖZEN İPLİK (Turkey), Girona.";
    display: block;
    padding: 24px;
    color: var(--aw-muted);
    font-size: 14px;
}

/* Leaflet's own controls, retinted from its default blue links. */
.leaflet-container a          { color: var(--aw-primary-deep); }
.leaflet-bar a                { color: var(--aw-ink); }

.leaflet-popup-content        { font-family: var(--aw-font-body); font-size: 14px; }

/* Attribution is a licence condition of the OSM tiles: it must stay legible
   and must not be hidden. */
.leaflet-control-attribution  { font-size: 11px; color: var(--aw-muted); }
.leaflet-control-attribution a { color: var(--aw-primary-deep); }

@media (max-width: 767px) {
    #aw-case-map { height: 340px; }
}

/* --- case study rows --- */

.aw-case {
    scroll-margin-top: 90px;   /* clears the sticky header when a pin jumps here */
    padding: 30px 0;
}

.aw-case + .aw-case {
    border-top: 1px solid #e3e9f0;
}

.aw-case__flag {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 3px;
    background: var(--aw-light-2);
    color: var(--aw-accent-deep);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
}

/* --- illustration placeholder ---
   Deliberately obvious. A faint grey box reads as a broken image; a labelled
   dashed frame reads as "artwork pending", which is what it is. Replace the
   whole element with an Elementor image widget once the figures arrive. */
.aw-figure-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 200px;
    padding: 24px;
    border: 2px dashed #b9cbdd;
    border-radius: 6px;
    background: repeating-linear-gradient(
        45deg,
        rgba(11, 92, 173, .04),
        rgba(11, 92, 173, .04) 10px,
        transparent 10px,
        transparent 20px
    );
    color: var(--aw-muted);
    font-size: 13.5px;
    line-height: 1.5;
}

/* ============================================================
   11. TEAM MEMBERS PAGE
   ------------------------------------------------------------
   Partner block = organisation heading + blurb, then the people.
   Written as plain markup in the page content rather than an
   Elementor layout: this repeats across every language, and a
   translator can work on real sentences instead of hunting through
   nested builder JSON. It also keeps the heading order honest --
   h2 per organisation, h3 per person -- which a builder makes
   surprisingly hard.
   ============================================================ */

.aw-partner {
    margin: 0 0 54px;
    padding: 0 0 10px;
}

.aw-partner + .aw-partner {
    border-top: 1px solid #e3e9f0;
    padding-top: 40px;
}

/* --- partner logo sizing -------------------------------------------------
   Elementor's image-box sizes its image by WIDTH. The partner logos run from
   1:1 (HMU) to 3.76:1 (HKR), so a single width makes the square marks huge
   and the wide wordmarks illegible. Constraining HEIGHT instead gives every
   logo the same optical weight, which is the whole point of a logo row.

   Scoped to the partner section so it cannot affect image-box widgets used
   elsewhere on the site. */
.aw-partner-logo .elementor-image-box-img {
    width: auto !important;   /* beats Elementor's inline width */
}

.aw-partner-logo .elementor-image-box-img img {
    height: 100px;
    width: auto;
    max-width: 367px;
    object-fit: contain;
}

.aw-partner-logo .elementor-image-box-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
}

@media (max-width: 575px) {
    .aw-partner-logo .elementor-image-box-wrapper { display: block; }

    /* max-width has to come down to the viewport here, or the 3.76:1 HKR
       wordmark asks for 301px on a 375px phone. object-fit above keeps the
       clamp from squashing it -- it letterboxes instead of distorting. */
    .aw-partner-logo .elementor-image-box-img img {
        height: 80px;
        max-width: 100%;
        margin-bottom: 12px;
    }
}

.aw-partner__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}

/* The acronym and country live inside a <p> rather than sitting bare in the
   flex row. That is forced by wpautop, which wraps loose inline elements
   following a heading in a paragraph it never closes; supplying the block
   element ourselves keeps the markup valid. It carries no visual weight. */
.aw-partner__meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.aw-partner__head h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.3;
}

/* Acronym and country ride alongside the name. The number is generated
   from the consortium order, so the list cannot silently reorder. */
.aw-partner__tag {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 3px;
    background: var(--aw-light);
    color: var(--aw-primary-deep);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.aw-partner__tag--coord {
    background: var(--aw-primary);
    color: #fff;
}

.aw-partner__country {
    font-size: 14px;
    color: var(--aw-muted);
}

.aw-partner__blurb {
    margin: 0 0 26px;
    max-width: 74ch;
    color: var(--aw-muted);
}

/* --- people --- */

.aw-people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.aw-person {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e3e9f0;
    border-radius: 6px;
    padding: 22px;
}

.aw-person__photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin-bottom: 14px;
    object-fit: cover;
    display: block;
    background: var(--aw-light);
}

/* Placeholder until real headshots arrive. Initials on a tinted disc reads
   as a deliberate choice; a generic silhouette repeated seven times reads as
   a broken page. Swap for <img class="aw-person__photo"> when photos exist. */
.aw-person__photo--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--aw-font-head);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--aw-primary-deep);
    background: var(--aw-light);
    box-shadow: inset 0 0 0 1px rgba(11, 92, 173, .18);
}

.aw-person__name {
    margin: 0 0 2px;
    font-size: 18px;
    line-height: 1.35;
}

.aw-person__role {
    margin: 0 0 12px;
    font-size: 13.5px;
    color: var(--aw-muted);
}

.aw-person__bio {
    margin: 0 0 16px;
    font-size: 14.5px;
    line-height: 1.65;
}

/* Pushes the link row to the card bottom so ragged bio lengths still line up. */
.aw-person__links {
    margin: auto 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aw-person__links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    padding: 5px 11px;
    border-radius: 3px;
    border: 1px solid #d5dfea;
    color: var(--aw-primary-deep);
    text-decoration: none;
}

.aw-person__links a:hover {
    background: var(--aw-light);
    border-color: var(--aw-primary);
    color: var(--aw-primary-deep);
}

/* Icons are decorative; each link already has visible text beside it. */
.aw-person__links i {
    font-size: 12px;
}

@media (max-width: 575px) {
    .aw-people          { grid-template-columns: 1fr; }
    .aw-partner__head h2 { font-size: 20px; }
}

/* ============================================================
   10. RTL -- Hebrew
   ------------------------------------------------------------
   Sosso ships rtl.css and rtl-responsive.css, which functions.php
   loads when is_rtl() is true, so the bulk of the mirroring is
   handled. These are the child-specific pieces that the parent
   cannot know about.
   ============================================================ */

[dir="rtl"] .footer-area .aw-funding-strip { flex-direction: row; }
[dir="rtl"] .aw-lang__panel a              { text-align: right; }

/* Latin-script proper nouns inside Hebrew copy: keep the acronym,
   the grant number and the URL running left-to-right. */
[dir="rtl"] .aw-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}


/* ============================================================
   14. GLOSSARY
   ------------------------------------------------------------
   Everything archive-glossary.php and single-glossary.php need.
   The sibling site keeps this in style attributes plus the
   Customizer's Additional CSS; both are invisible to anyone
   reading the theme, and Additional CSS does not survive a move.
   ============================================================ */

/* The parent gives .page-title-area a fixed 450px and an 80px title, sized
   for a full-bleed photograph. There is no photograph here, and 450px of
   empty ground above a word list is a lot of scrolling to no purpose. */
.glossary-hero.page-title-area {
    height: auto;
    min-height: 0;
    padding: 56px 0;
    background: var(--aw-dark);
}

.glossary-hero.page-title-area::before { display: none; }

.glossary-hero .page-title-content .title {
    font-size: clamp(32px, 5vw, 52px);
    margin-bottom: 14px;
}

.glossary-intro,
.glossary-active-note {
    max-width: 62ch;
    margin: 0;
    color: var(--aw-on-dark);       /* 10.16:1 on --aw-dark */
}

.glossary-active-note { margin-top: 10px; }

/* --- A-Z strip --- */
.glossary-az-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.glossary-az-list .gl-az-link {
    display: inline-block;
    min-width: 2.4em;
    padding: 6px 10px;
    border: 1px solid #ccd8e5;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    color: var(--aw-primary-deep);    /* 8.1:1 on white */
    font-weight: 600;
    line-height: 1.2;
}

a.gl-az-link:hover,
a.gl-az-link:focus-visible {
    border-color: var(--aw-primary);
    background: var(--aw-light);
    color: var(--aw-primary-deep);
}

.glossary-az-list li.active .gl-az-link {
    background: var(--aw-primary);    /* white on this = 5.03:1 */
    border-color: var(--aw-primary);
    color: #fff;
}

/* --- the list itself --- */
.glossary-letter {
    margin: 40px 0 16px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--aw-light);
    font-size: 26px;
    color: var(--aw-primary-deep);
}

.glossary-item { margin-bottom: 28px; }

.glossary-entry-title {
    margin: 0 0 6px;
    font-size: 19px;
    line-height: 1.35;
}

.glossary-entry-excerpt p {
    margin: 0;
    color: var(--aw-muted);         /* 6.17:1 on white */
}

.glossary-credit {
    margin-top: 48px;
    padding-top: 18px;
    border-top: 1px solid #e3e9f0;
    max-width: 78ch;
    font-size: 14px;
    font-style: italic;
    color: var(--aw-muted);
}

.glossary-empty { margin: 30px 0; }

/* --- one term --- */
.glossary-single-title {
    margin: 0 0 18px;
    font-size: clamp(28px, 4vw, 40px);
}

.glossary-single-content p { margin-bottom: 1em; }

.glossary-back {
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid #e3e9f0;
}


/* ============================================================
   15. AWARE PAGE COMPONENTS
   ------------------------------------------------------------
   Used by template-home.php / template-page.php and the page
   HTML written by scratchpad/pages_build.py. Colours are the
   measured tokens from section 1 only; ratios noted where text
   sits on something other than white.
   ============================================================ */

/* --- buttons --- */
.aw-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 4px;
    border: 2px solid transparent;
    font-family: var(--aw-font-head);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.aw-btn--primary              { background: var(--aw-primary); color: #fff; }          /* 6.67:1 */
.aw-btn--primary:hover        { background: var(--aw-primary-deep); color: #fff; }
.aw-btn--light                { background: #fff; color: var(--aw-primary-deep); }     /* 10.22:1 */
.aw-btn--light:hover          { background: var(--aw-light); color: var(--aw-primary-deep); }
.aw-btn--ghost                { border-color: rgba(255, 255, 255, .85); color: #fff; }
.aw-btn--ghost:hover          { background: #fff; color: var(--aw-primary-deep); }
.aw-btn--outline              { border-color: var(--aw-primary); color: var(--aw-primary); }
.aw-btn--outline:hover        { background: var(--aw-primary); color: #fff; }
.aw-btn[aria-disabled="true"] { background: #e3e9f0; color: var(--aw-muted); cursor: not-allowed; }  /* 5.36:1 */

.aw-btn:focus-visible { outline: 3px solid var(--aw-accent); outline-offset: 3px; }
.aw-hero .aw-btn:focus-visible,
.aw-band .aw-btn:focus-visible { outline-color: #fff; }

/* --- home hero ---
   Navy-to-teal overlay from the logo's palette over a water-sampling photo. */
.aw-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(72px, 11vw, 140px) 0 clamp(64px, 9vw, 120px);
    color: #fff;
    /* Photo (2026-10-21, mirrored so the sampling hand sits right of the
       text) under the brand gradient. The overlay stays >= .84 opaque
       under the text column, so even a pure-white pixel behind white text
       blends to a navy that keeps 9:1+. */
    background:
        linear-gradient(90deg, rgba(11, 42, 74, .94) 0%, rgba(11, 42, 74, .88) 40%, rgba(8, 63, 132, .55) 68%, rgba(0, 90, 83, .15) 100%),
        url("assets/images/hero-water.jpg") 70% 55% / cover no-repeat,
        var(--aw-dark);
}
@media (max-width: 900px) {
    /* text spans the full width here: overlay evenly */
    .aw-hero {
        background:
            linear-gradient(180deg, rgba(11, 42, 74, .88) 0%, rgba(11, 42, 74, .9) 100%),
            url("assets/images/hero-water-sm.jpg") 75% 50% / cover no-repeat,
            var(--aw-dark);
    }
}
.aw-hero__eyebrow {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--aw-on-dark);
}
.aw-hero h1 {
    max-width: 16ch;
    margin: 0 0 22px;
    color: #fff;
    font-size: clamp(36px, 5.6vw, 64px);
    line-height: 1.08;
}
.aw-hero__lead {
    max-width: 58ch;
    margin: 0 0 34px;
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.6;
    color: var(--aw-on-dark);
}
.aw-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* --- inner page title band --- */
.aw-band {
    padding: 46px 0 40px;
    color: #fff;
    background: linear-gradient(120deg, var(--aw-dark) 0%, var(--aw-primary-deep) 70%, var(--aw-accent-deep) 100%);
}
.aw-band__title {
    margin: 6px 0 0;
    color: #fff;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.15;
}
.aw-band__lead {
    max-width: 70ch;
    margin: 14px 0 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--aw-on-dark);
}
.aw-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    color: var(--aw-on-dark);
}
.aw-crumbs li + li::before { content: "/"; margin-inline-end: 6px; opacity: .7; }
.aw-crumbs a       { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.aw-crumbs a:hover { color: #9FD3F2; }

/* --- page body + prose --- */
.aw-page { padding: 56px 0 80px; }
.aw-page h2 { margin: 48px 0 16px; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.25; }
.aw-page h2:first-child { margin-top: 0; }
.aw-page h3 { margin: 28px 0 10px; font-size: 20px; line-height: 1.35; }
.aw-page p,
.aw-page li { font-size: 16.5px; line-height: 1.7; }
.aw-page > .container > p,
.aw-prose p,
.aw-prose ul { max-width: 78ch; }
.aw-page ul.aw-list { padding-inline-start: 1.2em; list-style: disc; }
.aw-page ul.aw-list li { margin-bottom: 6px; }

.aw-page .aw-lead { font-size: 19px; line-height: 1.65; color: var(--aw-ink); }

/* --- sections (home) --- */
.aw-section       { padding: clamp(56px, 7vw, 90px) 0; }
.aw-section--tint { background: var(--aw-light); }
.aw-section__head { max-width: 72ch; margin-bottom: 34px; }
.aw-section__head h2 { margin: 0 0 12px; font-size: clamp(26px, 3vw, 36px); }
.aw-section__head p  { margin: 0; font-size: 17.5px; line-height: 1.7; color: var(--aw-muted); }
.aw-kicker {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--aw-accent);                                 /* 5.36:1 */
}
.aw-section--tint .aw-kicker { color: var(--aw-accent-deep); }   /* 7.08:1 on --aw-light */

/* --- cards --- */
.aw-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.aw-cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.aw-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 26px 26px 24px;
    background: #fff;
    border: 1px solid #e3e9f0;
    border-top: 4px solid var(--aw-primary);
    border-radius: 6px;
}
.aw-card h3 { margin: 0 0 10px; font-size: 19px; line-height: 1.35; }
.aw-card p  { margin: 0 0 10px; font-size: 15.5px; line-height: 1.65; }
.aw-card p:last-child { margin-bottom: 0; }
.aw-card .aw-card__meta {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--aw-muted);
}
.aw-card .aw-card__link { margin-top: auto; padding-top: 8px; font-weight: 600; }
/* The three LCSA pillars carry the three logo circles. Border only, never text. */
.aw-card--lca    { border-top-color: var(--aw-green-fill); }
.aw-card--lcc    { border-top-color: var(--aw-primary); }
.aw-card--slca   { border-top-color: var(--aw-teal-fill); }
.aw-card--accent { border-top-color: var(--aw-teal-fill); }

.aw-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    background: var(--aw-light);
    color: var(--aw-primary-deep);                           /* 8.92:1 */
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
}

/* --- KPI strip --- */
.aw-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.aw-kpi {
    padding: 22px 18px;
    text-align: center;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 0 #e3e9f0, 0 6px 20px rgba(11, 42, 74, .06);
}
.aw-kpi__value {
    display: block;
    font-family: var(--aw-font-head);
    font-size: clamp(34px, 4vw, 46px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--aw-primary);
    font-variant-numeric: tabular-nums;
}
.aw-kpi__label {
    display: block;
    margin-top: 8px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--aw-ink);
}
.aw-kpi__note {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--aw-muted);
}
.aw-footnote { margin-top: 18px; font-size: 13.5px; color: var(--aw-muted); }

/* --- news --- */
.aw-news {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}
.aw-news__item article {
    height: 100%;
    padding: 24px;
    border: 1px solid #e3e9f0;
    border-radius: 6px;
    background: #fff;
}
.aw-news__date    { margin: 0 0 8px; font-size: 13px; color: var(--aw-muted); }
.aw-news__title   { margin: 0 0 10px; font-size: 19px; line-height: 1.35; }
.aw-news__title a { color: var(--aw-ink); text-decoration: none; }
.aw-news__title a:hover { color: var(--aw-primary); text-decoration: underline; }
.aw-news__excerpt { margin: 0; font-size: 15px; line-height: 1.6; }
.aw-news-empty {
    margin: 0 0 24px;
    padding: 20px 22px;
    border: 1px dashed #ccd8e5;
    border-radius: 6px;
    background: #fff;
    color: var(--aw-muted);
}

/* --- callout --- */
.aw-callout {
    margin: 28px 0;
    padding: 20px 24px;
    border-inline-start: 4px solid var(--aw-teal-fill);
    border-radius: 0 6px 6px 0;
    background: var(--aw-light-2);
}
.aw-callout p { margin: 0; }
.aw-callout p + p { margin-top: 8px; }

/* --- timeline (events, web app milestones): connected dots ---
   A rail down the left; every date gets a dot on it. A range is split by
   content_v2.timeline_split() into __from and __to, stacked (M4 above M12),
   and a coloured segment on the rail joins their two dots.

   Dots hang off the date spans themselves -- not off li padding, which
   Sosso's `.klb-post ul li { padding: 0 }` resets (that is what dropped the
   dots onto the text in the very first version). Rail centre = dot centre =
   6px from the left edge. */
.aw-timeline {
    position: relative;
    max-width: 62ch;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}
.aw-timeline::before {                                       /* the rail */
    content: "";
    position: absolute;
    left: 5px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    background: #d5dfea;
}
.aw-timeline li {
    display: grid;
    grid-template-columns: 7.5em minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    margin: 0;
    padding: 10px 0;
}
.aw-timeline__when {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--aw-primary-deep);                           /* 10.22:1 */
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}
.aw-timeline__from,
.aw-timeline__to {
    position: relative;
    padding-left: 22px;
}
.aw-timeline__from::before,
.aw-timeline__to::before {                                   /* the dots */
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    top: 2px;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 3px solid var(--aw-primary);
    background: #fff;
}
.aw-timeline__to::before { background: var(--aw-primary); }  /* end dot filled */
.aw-timeline__when:has(.aw-timeline__to)::before {           /* range segment */
    content: "";
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--aw-primary);
}

/* --- figure (Gantt) --- */
.aw-figure { margin: 24px 0 8px; }
.aw-figure__scroll {
    overflow-x: auto;
    border: 1px solid #e3e9f0;
    border-radius: 6px;
    background: #fff;
}
.aw-figure img { display: block; min-width: 820px; width: 100%; height: auto; }
.aw-figure figcaption { margin-top: 10px; font-size: 14px; color: var(--aw-muted); }

/* --- study case rows (extends section 12) --- */
.aw-case h2 { margin-top: 0; }
.aw-case__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px 24px;
    margin: 14px 0 16px;
    padding: 16px 18px;
    background: var(--aw-light);
    border-radius: 6px;
}
.aw-case__facts div { margin: 0; }
.aw-case__facts dt {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--aw-primary-deep);                           /* 8.92:1 on --aw-light */
}
.aw-case__facts dd { margin: 2px 0 0; font-size: 15.5px; }

/* --- partner logos on the Partners page --- */
.aw-partner__logo {
    float: inline-end;
    height: 84px;
    width: auto;
    max-width: 220px;
    margin-block: 0 12px;
    margin-inline: 24px 0;
    object-fit: contain;
}
.aw-partner::after { content: ""; display: table; clear: both; }
@media (max-width: 575px) {
    .aw-partner__logo { float: none; display: block; height: 64px; margin: 0 0 14px; }
}

/* --- footer additions --- */
.footer-area .aw-funding-strip img.aw-logo-plate {
    background: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    box-sizing: content-box;
    height: 40px;                  /* +16px padding = the 56px emblem height */
}
@media (max-width: 575px) {
    .footer-area .aw-funding-strip img.aw-logo-plate { height: 30px; }
}
.aw-footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.aw-footer-nav a       { color: #fff; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.aw-footer-nav a:hover { color: #9FD3F2; }                 /* 9.05:1 on --aw-dark */

/* --- list reset for components ---
   Sosso's `.klb-post ul li { list-style-type: circle }` (0,1,2) puts a
   bullet on every card, counter and person whenever these components end up
   inside its default page wrapper. Same specificity, loaded later, wins. */
ul.aw-cards, ul.aw-kpis, ul.aw-news, ul.aw-people, ul.aw-timeline,
.klb-post ul.aw-cards, .klb-post ul.aw-kpis, .klb-post ul.aw-news,
.klb-post ul.aw-people, .klb-post ul.aw-timeline {
    list-style: none;
    padding-inline-start: 0;
}
ul.aw-cards > li, ul.aw-kpis > li, ul.aw-news > li, ul.aw-people > li, ul.aw-timeline > li,
.klb-post ul.aw-cards > li, .klb-post ul.aw-kpis > li, .klb-post ul.aw-news > li,
.klb-post ul.aw-people > li, .klb-post ul.aw-timeline > li {
    list-style: none;
}
ul.aw-timeline > li,
.klb-post ul.aw-timeline > li { padding: 12px 0; line-height: 1.6; }

/* "Show all entries" in the glossary filter note (the A-Z strip has no
   "All" chip). White on --aw-dark, underlined so it reads as a link. */
.glossary-show-all {
    margin-inline-start: 8px;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.glossary-show-all:hover { color: #9FD3F2; }

/* --- single-pin map ([aw_map]) --- */
.aw-map { margin: 22px 0 0; }
.aw-map__canvas {
    width: 100%;
    height: 320px;
    border: 1px solid #e3e9f0;
    border-radius: 6px;
    background: var(--aw-light);
}
/* Until Leaflet draws (or if it is blocked) the box says what it is for. */
.aw-map__canvas:not(.is-live)::after {
    content: "Map loading. The address and a link to the full map are below.";
    display: block;
    padding: 20px;
    color: var(--aw-muted);
    font-size: 14px;
}
.aw-map__caption {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 18px;
    margin-top: 8px;
    font-size: 14px;
    color: var(--aw-muted);
}

/* --- menu text on white panels ---
   sosso-core/classes/style.php paints the Customizer "Header Font Color"
   (white, for the blue bar) onto the top-level links AND the dropdown links:
     .header-menu .navigation .navbar .navbar-nav .nav-item a,
     .header-menu ... .nav-item .sub-menu > li a   { color: <font colour> }
   But the dropdown panel is white, and below 992px the whole collapsed menu
   is a white panel too -- white on white. That inline block is printed AFTER
   this sheet, so these rules win on specificity (a leading `body` plus
   .navbar-collapse), not on load order. Hover on white uses --aw-primary
   (6.67:1); the parent's hover rule is !important, hence ours is too. */
body .header-menu .navigation .navbar .navbar-nav .nav-item .sub-menu > li > a {
    color: var(--aw-ink);                                    /* 16.86:1 on #fff */
}
/* Desktop dropdown hover keeps the parent's deep-blue row + sky text (6.36:1). */

@media (max-width: 991px) {
    body .header-menu .navigation .navbar .navbar-collapse .navbar-nav .nav-item > a,
    body .header-menu .navigation .navbar .navbar-collapse .navbar-nav .nav-item .sub-menu > li > a {
        color: var(--aw-ink);
    }
    body .header-menu .navigation .navbar .navbar-collapse .navbar-nav .nav-item > a:hover,
    body .header-menu .navigation .navbar .navbar-collapse .navbar-nav .nav-item .sub-menu > li > a:hover,
    body .header-menu .navigation .navbar .navbar-collapse .navbar-nav .nav-item .sub-menu > li:hover > a {
        color: var(--aw-primary) !important;
        background: var(--aw-light);
    }
    body .header-menu .navigation .navbar .navbar-collapse .navbar-nav .nav-item a .plus,
    body .header-menu .navigation .navbar .navbar-collapse .sub-nav-toggler {
        color: var(--aw-ink);
    }
}

/* --- footer social links --- */
.footer-area .aw-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.footer-area .aw-social a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .55);             /* 3:1+ on --aw-dark */
    border-radius: 4px;
    color: #fff;                                              /* 14.54:1 */
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.footer-area .aw-social a:hover { background: #fff; color: var(--aw-dark); }
.footer-area .aw-social i { font-size: 16px; }

/* --- Partners page: logo column with link buttons ---
   Pure layout: the page HTML is unchanged (logo, head, blurb, then a <p> of
   two links), so all six languages pick this up without re-translation.
   Scoped with :has() to partner sections that HAVE a logo -- the Team page
   uses .aw-partner too, without logos. Browsers without :has() keep the
   older float layout, which still works.

     [ name + tags      ] [ logo  ]
     [ blurb ...        ] [ links ]                                          */
.aw-partner:has(> .aw-partner__logo) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    grid-template-areas:
        "head  logo"
        "blurb links";
    column-gap: 44px;
    row-gap: 6px;
    align-items: start;
}
/* The clearfix pseudo-element would become a stray grid item. */
.aw-partner:has(> .aw-partner__logo)::after { display: none; }

.aw-partner:has(> .aw-partner__logo) > .aw-partner__logo {
    grid-area: logo;
    float: none;
    margin: 0;
    height: 84px;
    max-width: 220px;
    justify-self: center;
}
.aw-partner:has(> .aw-partner__logo) > .aw-partner__head  { grid-area: head; align-self: center; }
.aw-partner:has(> .aw-partner__logo) > .aw-partner__blurb { grid-area: blurb; margin-bottom: 0; }

/* The links paragraph. font-size: 0 hides the " · " text node between the
   two links; each link restores its own size. */
.aw-partner:has(> .aw-partner__logo) > p:last-child {
    grid-area: links;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 18px 0 0;
    font-size: 0;
}
.aw-partner:has(> .aw-partner__logo) > p:last-child a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #d5dfea;
    border-radius: 4px;
    background: #fff;
    color: var(--aw-primary-deep);                          /* 10.22:1 */
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease;
}
.aw-partner:has(> .aw-partner__logo) > p:last-child a:hover {
    background: var(--aw-light);
    border-color: var(--aw-primary);
}
/* Icons are decorative: the link text says what each link is. */
.aw-partner:has(> .aw-partner__logo) > p:last-child a::before {
    flex: 0 0 18px;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    color: var(--aw-accent);                                 /* teal, 5.36:1 */
}
.aw-partner:has(> .aw-partner__logo) > p:last-child a[target="_blank"]::before { content: "\f0ac"; }   /* globe */
.aw-partner:has(> .aw-partner__logo) > p:last-child a[href*="#team-"]::before   { content: "\f0c0"; }   /* users */
/* Opens in a new tab: say so visually too (the screen-reader text already does). */
.aw-partner:has(> .aw-partner__logo) > p:last-child a[target="_blank"]::after {
    content: "\f35d";
    margin-inline-start: auto;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 12px;
    opacity: .7;
}

@media (max-width: 767px) {
    .aw-partner:has(> .aw-partner__logo) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "logo" "head" "links" "blurb";
    }
    .aw-partner:has(> .aw-partner__logo) > .aw-partner__logo { height: 64px; }
    .aw-partner:has(> .aw-partner__logo) > p:last-child {
        flex-direction: row;
        flex-wrap: wrap;
        margin: 8px 0 12px;
    }
}


/* ============================================================
   16. ROUND 2 (2026-09-29): icons, mini maps, events columns,
       passport card, simplified Gantt, impact outputs
   ------------------------------------------------------------
   Icons come from the theme's Font Awesome 5 Pro (light, 300)
   and are decorative: every one sits next to text that says the
   same thing, so they are pseudo-elements / aria-hidden.
   ============================================================ */

/* --- shared icon disc --- */
.aw-card--lca::before,
.aw-card--lcc::before,
.aw-card--slca::before,
.aw-kpi__value::before,
.aw-events__col > h2::before,
.aw-outputs__card > h3::before {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
    font-size: 24px;
    line-height: 1;
    background: var(--aw-light);
    color: var(--aw-primary);
}

/* --- 1. LCSA pillar cards: the three circles of the AWARE logo --- */
.aw-card--lca::before,
.aw-card--lcc::before,
.aw-card--slca::before { margin-bottom: 18px; }
.aw-card--lca::before  { content: "\f06c"; background: #EAF4DF; color: var(--aw-green); }       /* leaf, 4.62:1 */
.aw-card--lcc::before  { content: "\f153"; }                                                     /* euro */
.aw-card--slca::before { content: "\f0c0"; background: var(--aw-light-2); color: var(--aw-accent-deep); }  /* people */

/* --- 2. KPI strip: one icon per figure, order fixed by the page --- */
.aw-kpi__value::before {
    margin: 0 auto 12px;
    font-size: 22px;
    width: 52px;
    height: 52px;
}
.aw-kpis > li:nth-child(1) .aw-kpi__value::before { content: "\f2b5"; }   /* partners: handshake */
.aw-kpis > li:nth-child(2) .aw-kpi__value::before { content: "\f3c5"; }   /* study cases: map pin */
.aw-kpis > li:nth-child(3) .aw-kpi__value::before { content: "\f7d9"; }   /* applications: tools */
.aw-kpis > li:nth-child(4) .aw-kpi__value::before { content: "\f66f"; }   /* policymakers: landmark */
.aw-kpis > li:nth-child(5) .aw-kpi__value::before { content: "\f109"; }   /* web app: laptop */
.aw-kpis > li:nth-child(6) .aw-kpi__value::before { content: "\f0a1"; }   /* stakeholders: bullhorn */

/* --- 3. study-case cards: line world map + pin across the card top ---
   Two background layers on one pseudo-element: pins/<case>.svg over
   world-lines.svg (scratchpad/world_map.py). Both files share ONE viewBox
   (0 0 360 133, equirectangular 75N..58S) and are drawn at 100% 100% in a
   box of that exact aspect ratio, so the pin lands where it belongs with no
   positioning maths. (The first version positioned a pin image by
   background-position %, which is relative to the space left over, and the
   Crete pin drifted onto Libya.) The card is picked by its link's anchor,
   identical in all six languages. */
.aw-card:has(a[href*="#case-"])::before {
    content: "";
    display: block;
    margin: -26px -26px 18px;
    aspect-ratio: 360 / 133;
    background:
        var(--pin, none) 0 0 / 100% 100% no-repeat,
        url("assets/images/world-lines.svg") 0 0 / 100% 100% no-repeat,
        var(--aw-light);
}
.aw-card:has(a[href$="#case-hersonissos"]) { --pin: url("assets/images/pins/hersonissos.svg"); }
.aw-card:has(a[href$="#case-lisbon"])      { --pin: url("assets/images/pins/lisbon.svg"); }
.aw-card:has(a[href$="#case-campinas"])    { --pin: url("assets/images/pins/campinas.svg"); }
.aw-card:has(a[href$="#case-ozen-iplik"])  { --pin: url("assets/images/pins/ozen-iplik.svg"); }
.aw-card:has(a[href$="#case-girona"])      { --pin: url("assets/images/pins/girona.svg"); }

/* --- 5. Team page: institution logo beside each institution heading ---
   Same logos as the Partners page, shipped in the theme. Decorative: the
   institution's name is the heading right next to it. */
.aw-partner[id^="team-"] > .aw-partner__head {
    align-items: center;
    column-gap: 16px;
}
.aw-partner[id^="team-"] > .aw-partner__head::before {
    content: "";
    flex: 0 0 64px;
    height: 48px;
    background: #fff center / contain no-repeat;
    border: 1px solid #e3e9f0;
    border-radius: 6px;
    padding: 4px;
    background-origin: content-box;
}
#team-unc     > .aw-partner__head::before { background-image: url("assets/images/partners/unc.png"); }
#team-hmu     > .aw-partner__head::before { background-image: url("assets/images/partners/hmu.png"); }
#team-ipl     > .aw-partner__head::before { background-image: url("assets/images/partners/ipl.png"); }
#team-unicamp > .aw-partner__head::before { background-image: url("assets/images/partners/unicamp.png"); }
#team-itu     > .aw-partner__head::before { background-image: url("assets/images/partners/itu.png"); }
#team-icra    > .aw-partner__head::before { background-image: url("assets/images/partners/icra.png"); }

/* --- 6. Events: one vertical timeline per work package ---
   content_v2.events_by_wp(): WP1 / WP2 / WP5 / WP6 sections stacked down
   the page, each a connected-dot timeline (section "timeline" above). The
   section colour matches that WP's bar in the Work Plan chart; each event
   carries its original group name ("Local workshops", ...) as a label. */
.aw-wp-events--wp1 { --wpc: #4F5F70; }                  /* as .aw-gantt__bar--wp1 */
.aw-wp-events--wp2 { --wpc: var(--aw-primary); }
.aw-wp-events--wp5 { --wpc: var(--aw-primary-deep); }
.aw-wp-events--wp6 { --wpc: var(--aw-accent-deep); }

.aw-wp-events__wp {
    margin: 0 0 34px;
    padding: 4px 0 4px 24px;
    border-left: 4px solid var(--wpc);
}
.aw-page .aw-wp-events__wp > h2 {
    margin: 0 0 12px;
    font-size: clamp(20px, 2.2vw, 24px);
    color: var(--wpc);                                   /* >= 6.56:1 */
}
.aw-wp-events__wp .aw-timeline { max-width: 70ch; }
.aw-wp-events__wp .aw-timeline__from::before,
.aw-wp-events__wp .aw-timeline__to::before { border-color: var(--wpc); }
.aw-wp-events__wp .aw-timeline__to::before,
.aw-wp-events__wp .aw-timeline__when:has(.aw-timeline__to)::before { background: var(--wpc); }

/* Original event group, as a small label above the event. Group colours
   are all >= 5:1 on white, so they work as text. */
.aw-cat-1 { --cat: var(--aw-primary); }
.aw-cat-2 { --cat: var(--aw-accent); }
.aw-cat-3 { --cat: var(--aw-green); }
.aw-cat-4 { --cat: var(--aw-dark); }
.aw-timeline__body { display: block; }
.aw-timeline__type {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cat);
}
:lang(el) .aw-timeline__type { text-transform: none; letter-spacing: 0; }

/* --- 6b. Events, desktop: WP "swimlanes" on one time axis ---
   From 992px the WP sections sit side by side and share one vertical axis
   M1..M36 (--mh px per month; MUST equal MONTH_PX in content_v2.py), so an
   event at M12 is lower than one at M6 in another column. Each <li> carries
   --s / --e (first / last month) and --ly (label push-down when two labels
   in a column would collide; computed per language). The bar is drawn at the
   true months; only the label moves. Below 992px none of this applies and
   the sections stay stacked vertical timelines (section 6). */
.aw-wp-events__axis { display: none; }

@media (min-width: 992px) {
    .aw-wp-events {
        --mh: 26px;
        --head: 92px;                                   /* WP heading band */
        display: grid;
        grid-template-columns: 42px repeat(4, minmax(0, 1fr));
        column-gap: 14px;
        padding-bottom: 180px;                          /* room for pushed labels */
    }
    .aw-wp-events__axis {
        display: block;
        position: relative;
        margin-top: var(--head);
        height: calc(36 * var(--mh));
    }
    .aw-wp-events__axis span {
        position: absolute;
        right: 0;
        top: calc((var(--m) - 1) * var(--mh) - 8px);
        font-size: 12px;
        font-weight: 700;
        color: var(--aw-muted);
    }
    .aw-wp-events__wp {
        margin: 0;
        padding: 0 0 0 12px;
        border-left-width: 3px;
        background: #fff;
    }
    .aw-page .aw-wp-events__wp > h2 {
        height: var(--head);
        margin: 0;
        padding: 0 4px 0 0;
        font-size: 16px;
        line-height: 1.35;
        overflow: hidden;
    }
    /* The lane: true height of 36 months, year bands every 12. */
    .aw-wp-events__wp .aw-timeline {
        position: relative;
        max-width: none;
        height: calc(36 * var(--mh));
        margin: 0;
        background:
            linear-gradient(#e3e9f0, #e3e9f0) 0 calc(12 * var(--mh)) / 100% 1px no-repeat,
            linear-gradient(#e3e9f0, #e3e9f0) 0 calc(24 * var(--mh)) / 100% 1px no-repeat,
            linear-gradient(rgba(11, 92, 173, .035), rgba(11, 92, 173, .035)) 0 calc(12 * var(--mh)) / 100% calc(12 * var(--mh)) no-repeat;
    }
    .aw-wp-events__wp .aw-timeline::before { top: 0; bottom: 0; }   /* rail, full lane */
    .aw-wp-events__wp .aw-timeline > li,
    .klb-post .aw-wp-events__wp ul.aw-timeline > li {
        position: absolute;
        left: 0;
        right: 0;
        top: calc((var(--s) - 1) * var(--mh));
        height: calc((var(--e) - var(--s) + 1) * var(--mh));
        display: block;
        padding: 0;
    }
    /* The bar on the rail: true start and length. */
    .aw-wp-events__wp .aw-timeline > li::before {
        content: "";
        position: absolute;
        left: 1px;
        top: 2px;
        bottom: 2px;
        width: 10px;
        border-radius: 5px;
        background: var(--wpc);
    }
    /* A single date (season) is a dot, not a bar. */
    .aw-wp-events__wp .aw-timeline > li:not(:has(.aw-timeline__to))::before {
        top: 4px;
        bottom: auto;
        height: 10px;
        background: #fff;
        border: 3px solid var(--wpc);
        box-sizing: border-box;
        width: 12px;
        left: 0;
    }
    /* The label sits beside the bar, pushed down by --ly if needed. */
    .aw-wp-events__wp .aw-timeline > li > .aw-timeline__when,
    .aw-wp-events__wp .aw-timeline > li > .aw-timeline__body {
        position: relative;
        top: var(--ly, 0px);
        margin-left: 22px;
    }
    .aw-wp-events__wp .aw-timeline__when { display: block; gap: 0; font-size: 13px; }
    .aw-wp-events__wp .aw-timeline__when::before,
    .aw-wp-events__wp .aw-timeline__from::before { display: none; }
    .aw-wp-events__wp .aw-timeline__from,
    .aw-wp-events__wp .aw-timeline__to { position: static; padding: 0; }
    .aw-wp-events__wp .aw-timeline__to::before {
        content: " 3  ";
        position: static;
        display: inline;
        width: auto;
        height: auto;
        border: 0;
        background: none;
    }
    .aw-wp-events__wp .aw-timeline__body {
        display: block;
        padding: 0 4px 0 0;
        font-size: 14px;
        line-height: 1.4;
        background: rgba(255, 255, 255, .92);
    }
    .aw-wp-events__wp .aw-timeline__type { font-size: 11px; }
}

/* --- 8. Funding: "project passport" --- */
.aw-passport {
    max-width: 860px;
    margin: 12px 0 40px;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d5dfea;
    box-shadow: 0 10px 30px rgba(11, 42, 74, .10);
}
.aw-passport__top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
    background: linear-gradient(120deg, var(--aw-dark), var(--aw-primary-deep) 70%, var(--aw-accent-deep));
    color: #fff;                                             /* 8.12:1 at the lightest point */
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.aw-passport__body {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 28px;
    padding: 28px 24px 18px;
    background:
        repeating-linear-gradient(135deg, rgba(11, 92, 173, .025) 0 2px, transparent 2px 10px),
        #fff;
}
.aw-passport__photo {
    align-self: start;
    padding: 14px;
    border: 1px solid #d5dfea;
    border-radius: 8px;
    background: #fff;
}
.aw-passport__photo img { display: block; width: 100%; height: auto; }
.aw-passport__data {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    margin: 0;
}
.aw-passport__data div { margin: 0; }
.aw-passport__data div.is-wide { grid-column: 1 / -1; }
.aw-passport__data dt {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--aw-muted);
}
.aw-passport__data dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; color: var(--aw-ink); }
/* Machine-readable-zone look. Decorative: aria-hidden in the markup. */
.aw-passport__mrz {
    margin: 0;
    padding: 12px 24px 14px;
    border-top: 1px dashed #d5dfea;
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    letter-spacing: .12em;
    line-height: 1.6;
    color: var(--aw-muted);
    word-break: break-all;
}
@media (max-width: 767px) {
    .aw-passport__body { grid-template-columns: minmax(0, 1fr); }
    .aw-passport__photo { max-width: 180px; }
    .aw-passport__data { grid-template-columns: minmax(0, 1fr); }
}

/* --- 9. Work plan: simplified Gantt (one bar per work package) ---
   Bars are positioned from --s / --e (first and last month) on the row,
   so the markup states the months in text too (M1-M36) and a screen
   reader gets the same information as the picture. */
.aw-gantt { margin: 24px 0 8px; }
.aw-gantt__scale,
.aw-gantt__row {
    display: grid;
    grid-template-columns: minmax(180px, 30%) minmax(0, 1fr);
    column-gap: 18px;
    align-items: center;
}
.aw-gantt__scale { margin-bottom: 8px; }
.aw-gantt__years {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column: 2;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--aw-muted);
}
.aw-gantt__rows { margin: 0; padding: 0; list-style: none; }
.aw-gantt__rows > li,
.klb-post .aw-gantt__rows > li { list-style: none; }
.aw-gantt__row { padding: 9px 0; border-top: 1px solid #eef2f6; }
.aw-gantt__label { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--aw-ink); }
.aw-gantt__track {
    position: relative;
    height: 34px;
    border-radius: 17px;
    background:
        linear-gradient(90deg, transparent calc(33.333% - 1px), #d5dfea calc(33.333% - 1px) 33.333%, transparent 33.333%,
                               transparent calc(66.666% - 1px), #d5dfea calc(66.666% - 1px) 66.666%, transparent 66.666%),
        #f4f7fa;
}
.aw-gantt__bar {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: calc((var(--s) - 1) / 36 * 100%);
    width: calc((var(--e) - var(--s) + 1) / 36 * 100%);
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 14px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    background: var(--aw-primary);                           /* white on it 6.67:1 */
}
.aw-gantt__bar--wp1 { background: #4F5F70; }                 /* 6.56:1 */
.aw-gantt__bar--wp2 { background: var(--aw-primary); }
.aw-gantt__bar--wp3 { background: var(--aw-accent); }        /* 5.36:1 */
.aw-gantt__bar--wp4 { background: var(--aw-green); }         /* 5.24:1 */
.aw-gantt__bar--wp5 { background: var(--aw-primary-deep); } /* 10.22:1 */
.aw-gantt__bar--wp6 { background: var(--aw-accent-deep); }  /* 8.12:1 */
.aw-gantt figcaption { margin-top: 12px; font-size: 14px; color: var(--aw-muted); }
@media (max-width: 767px) {
    .aw-gantt__scale, .aw-gantt__row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
    .aw-gantt__years { grid-column: 1; }
}

/* --- 10. Impact: outputs (publications, presentations, press ...) --- */
.aw-outputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 8px;
}
.aw-outputs__card {
    padding: 24px 26px 20px;
    background: #fff;
    border: 1px solid #e3e9f0;
    border-radius: 6px;
    scroll-margin-top: 90px;
}
.aw-page .aw-outputs__card > h3 {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 14px;
    font-size: 21px;
}
.aw-outputs__card > h3::before { flex: 0 0 48px; width: 48px; height: 48px; font-size: 20px; }
#publications  > h3::before { content: "\f518"; }   /* book */
#presentations > h3::before { content: "\f685"; }   /* presentation */
#press         > h3::before { content: "\f1ea"; }   /* newspaper */
#booklets      > h3::before { content: "\f15c"; }   /* document */
#newsletters   > h3::before { content: "\f0a1"; }   /* bullhorn */
#deliverables  > h3::before { content: "\f1c1"; }   /* pdf */
.aw-page .aw-outputs__card h4 {
    margin: 14px 0 6px;
    font-size: 14px;
    letter-spacing: .06em;
    color: var(--aw-muted);
}
.aw-outputs__list { margin: 0; padding: 0; list-style: none; }
.aw-outputs__list > li,
.klb-post .aw-outputs__list > li {
    list-style: none;
    padding: 8px 0 8px 26px;
    position: relative;
    border-bottom: 1px solid #eef2f6;
    font-size: 15px;
    line-height: 1.55;
}
.aw-outputs__list > li::before {
    content: "\f0c1";                                      /* link */
    position: absolute;
    inset-inline-start: 0;
    top: 10px;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 13px;
    color: var(--aw-accent);
}
.aw-outputs__list > li.is-pdf::before { content: "\f1c1"; color: #B03A2E; }   /* 6.02:1 */
.aw-outputs__empty { margin: 0; font-size: 14.5px; color: var(--aw-muted); }
@media (max-width: 767px) { .aw-outputs { grid-template-columns: minmax(0, 1fr); } }

/* --- news cards with a featured image ---
   With an image the whole <li> is the card (image on top, text below);
   without one the <article> keeps its own border as before. */
.aw-news__item--img {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3e9f0;
    border-radius: 6px;
}
.aw-news__item--img .aw-news__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
}
.aw-news__item--img article {
    flex: 1 1 auto;
    border: 0;
    border-radius: 0;
}


/* ============================================================
   17. CHANGE BRIEF 2026-10-19: partners -> study cases -> take part
   ------------------------------------------------------------
   Get-involved buttons, partner strip, chips, call-to-action
   callouts, Stakeholders and the new Contact page. Palette tokens
   from section 1 only.
   ============================================================ */

/* --- LinkedIn in the header (white top bar) --- */
.aw-header-linkedin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-inline-end: 10px;
    border: 1px solid var(--aw-muted);                       /* 6.56:1, UI >= 3:1 */
    border-radius: 3px;
    color: var(--aw-primary);
    font-size: 16px;
    text-decoration: none;
    vertical-align: middle;
}
.aw-header-linkedin:hover { border-color: var(--aw-primary); background: var(--aw-light); color: var(--aw-primary-deep); }

/* --- Home hero: three buttons, "Get involved" first and filled --- */
@media (max-width: 575px) {
    .aw-hero__actions { flex-direction: column; align-items: stretch; }
    .aw-hero__actions .aw-btn { justify-content: center; }
}

/* --- Home: partner logo strip --- */
.aw-partner-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}
ul.aw-partner-strip > li,
.klb-post ul.aw-partner-strip > li { list-style: none; margin: 0; padding: 0; }
.aw-partner-strip a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 104px;
    padding: 14px;
    background: #fff;
    border: 1px solid #e3e9f0;
    border-radius: 6px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.aw-partner-strip a:hover { border-color: var(--aw-primary); box-shadow: 0 6px 18px rgba(11, 42, 74, .08); }
.aw-partner-strip img { max-width: 100%; max-height: 72px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 991px) { .aw-partner-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575px) { .aw-partner-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.aw-section__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }

/* --- chips (WP lead partner, partner expertise) --- */
.aw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 4px 0 12px !important;
    padding: 0;
    list-style: none;
}
.aw-chip {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--aw-light);
    border: 1px solid #cfe0f1;
    color: var(--aw-primary-deep);                           /* 8.92:1 */
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}
a.aw-chip:hover { background: #fff; border-color: var(--aw-primary); color: var(--aw-primary-deep); }

/* "Shape the method with us ->" style text link inside a card. */
.aw-card .aw-card__more,
.aw-page .aw-card__more { margin: 6px 0 0; font-weight: 600; font-size: 15px; }
.aw-card__more a::after { content: " \2192"; }

/* --- call-to-action callout (title + text + button) --- */
.aw-callout--cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.aw-callout--cta .aw-callout__text { flex: 1 1 320px; }
.aw-page .aw-callout--cta h2,
.aw-page .aw-callout--cta h3,
.aw-page .aw-callout--cta h4 { margin: 0 0 4px; font-size: 18px; }
.aw-callout--cta .aw-btn { flex: 0 0 auto; }
.aw-card .aw-callout--cta { margin: 14px 0 0; padding: 14px 16px; }
.aw-card .aw-callout--cta .aw-btn { padding: 10px 18px; font-size: 14px; }

.aw-btn--small { padding: 9px 16px; font-size: 14px; }

/* --- Partners page: expertise chips + study case line + "Work with" ---
   Extends the grid of section "Partners page: logo column": the chips and
   the study-case line join the left column, the button joins the links. */
.aw-partner:has(> .aw-partner__logo) {
    grid-template-areas:
        "head   logo"
        "skills links"
        "blurb  links"
        "case   links";
}
.aw-partner:has(> .aw-partner__logo) > .aw-partner__skills { grid-area: skills; }
.aw-partner:has(> .aw-partner__logo) > .aw-partner__case   { grid-area: case; margin: 12px 0 0; }
.aw-partner__case { font-size: 15.5px; }
.aw-partner__case strong { color: var(--aw-ink); }
.aw-partner:has(> .aw-partner__logo) > p:last-child a.aw-partner__work {
    background: var(--aw-primary);
    border-color: var(--aw-primary);
    color: #fff;                                             /* 6.67:1 */
}
.aw-partner:has(> .aw-partner__logo) > p:last-child a.aw-partner__work:hover { background: var(--aw-primary-deep); }
.aw-partner:has(> .aw-partner__logo) > p:last-child a.aw-partner__work::before { content: "\f0e0"; color: #fff; }   /* envelope */
@media (max-width: 767px) {
    .aw-partner:has(> .aw-partner__logo) {
        grid-template-areas: "logo" "head" "skills" "links" "blurb" "case";
    }
}

/* --- Study cases: one button per case --- */
.aw-case__cta { margin: 14px 0 0 !important; }

/* --- Stakeholders + Contact: numbered steps --- */
.aw-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: aw-step;
}
ul.aw-steps > li, ol.aw-steps > li,
.klb-post ol.aw-steps > li { list-style: none; margin: 0; }
.aw-steps > li {
    counter-increment: aw-step;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 22px 20px;
    background: #fff;
    border: 1px solid #e3e9f0;
    border-radius: 6px;
}
.aw-steps > li::before {
    content: counter(aw-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--aw-primary);
    color: #fff;                                             /* 6.67:1 */
    font-family: var(--aw-font-head);
    font-size: 18px;
    font-weight: 700;
}
.aw-page .aw-steps h3 { margin: 0 0 8px; font-size: 19px; }
.aw-steps p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; }
.aw-steps .aw-btn { margin-top: auto; align-self: flex-start; }
.aw-steps--small > li { padding: 18px 18px 16px; }
.aw-steps--small > li::before { width: 32px; height: 32px; font-size: 15px; margin-bottom: 10px; }
.aw-steps--small p { margin: 0; }
@media (max-width: 991px) { .aw-steps { grid-template-columns: minmax(0, 1fr); } }

/* --- Contact page --- */
.aw-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 36px;
    align-items: start;
    margin: 8px 0 0;
}
.aw-contact-form {
    padding: 26px 28px 20px;
    background: #fff;
    border: 1px solid #e3e9f0;
    border-top: 4px solid var(--aw-primary);
    border-radius: 6px;
    scroll-margin-top: 120px;                                /* clears the header on #contact-form */
}
.aw-page .aw-contact-form > h2 { margin-top: 0; }
.aw-contact-side > div {
    margin: 0 0 18px;
    padding: 20px 22px;
    background: var(--aw-light);
    border-radius: 6px;
}
.aw-page .aw-contact-side h2 { margin: 0 0 8px; font-size: 18px; }
.aw-contact-side p { margin: 0 0 6px; font-size: 15.5px; }
.aw-contact-side .aw-map { margin-top: 12px; }
.aw-contact-side .aw-map__canvas { height: 220px; }
@media (max-width: 991px) { .aw-contact-grid { grid-template-columns: minmax(0, 1fr); } }

/* Form fields (CF7): full width, visible labels, clear focus. */
.wpcf7 label { display: block; margin: 0 0 4px; font-weight: 600; font-size: 15px; color: var(--aw-ink); }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 select,
.wpcf7 textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #768799;                               /* 3.69:1 on white, UI boundary */
    border-radius: 4px;
    background: #fff;
    color: var(--aw-ink);
    font-size: 16px;
}
.wpcf7 textarea { min-height: 160px; }
.wpcf7 .wpcf7-list-item { margin: 0; }

/* Partner cards: country / name / role / button. */
.aw-partner-cards .aw-card .aw-btn { margin-top: auto; align-self: flex-start; }
.aw-partner-cards .aw-card p:not(.aw-card__meta) { margin-bottom: 14px; }

/* Home study cases: five cards in one row on desktop (2026-10-21). Scoped by
   template and item count, so the class list in the six translations of the
   page stays untouched. 1170px / 5 leaves ~215px per card, enough for the
   longest line ("Urban and agricultural reuse (tourism area)") in two lines. */
@media (min-width: 1100px) {
    .page-template-template-home .aw-cards:has(> li:nth-child(5):last-child) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 18px;
    }
}