/* Theme variables — EC / landing page palette */
:root {
    --header-blue-right: #004494;
    /* EC blue */
    --ec-blue: #004494;
    --ec-blue-dark: #0A1F6C;
    --ec-yellow: #ffd617;
    --ec-yellow-75: #ffde39;
    --ec-grey: #404040;
    --ec-grey-50: #9f9f9f;
    --ec-menu-bg: #00002e;
    --font-size-base: 15px;
}

/* Base styles – let ECL handle typography (matches JRC/europa.eu) */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    text-align: left;
    font-size: var(--font-size-base);
    font-family: Arial, sans-serif;
}

/* Main layout */
main.main-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: #fff;
}

/* Header: match commission.europa.eu (plain white top bar, no EU flag SVG) */
.ecl-site-header {
    background-color: #fff;
    box-shadow: none;
}

.ecl-site-header .ecl-site-header__background {
    background-color: #fff;
    background-image: none;
}

.ecl-site-header__header {
    background-color: #fff;
    box-shadow: none;
}

/* Site name banner: white background with brand-colour text */
.ecl-site-header__banner {
    background-color: #fff;
}

.ecl-site-header__site-name {
    color: #0A1F6C;
}

@media (min-width: 996px) {
    .ecl-site-header__site-name {
        color: #0A1F6C;
    }
}

/* Banner */
.poc-banner {
    background-color: var(--ec-yellow);
    color: var(--ec-blue);
    padding: 1vh 0;
    font-size: clamp(0.65rem, 2.2vw, 0.9rem);
    font-weight: bold;
    width: 100%;
}

/* Full-bleed ECL Notification — keep ECL look; only stretch to page width */
.pvgis-notification {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    align-self: stretch;
    flex-shrink: 0;
    box-sizing: border-box;
}

.pvgis-notification .ecl-notification {
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
}

/* ECL Mega Menu: toggle hamburger/close icons (inline SVGs need visibility control).
 * Sync with [data-expanded] on the nav — aria-expanded alone can hide both icons. */
.ecl-mega-menu__open .ecl-mega-menu__icon--close {
    display: none;
}

.ecl-mega-menu[data-expanded] .ecl-mega-menu__open .ecl-mega-menu__icon--open,
.ecl-mega-menu__open[aria-expanded="true"] .ecl-mega-menu__icon--open {
    display: none;
}

.ecl-mega-menu[data-expanded] .ecl-mega-menu__open .ecl-mega-menu__icon--close,
.ecl-mega-menu__open[aria-expanded="true"] .ecl-mega-menu__icon--close {
    display: block;
}

/* EC mega menu: dark navy (#00002e).
 * Desktop layout in ECL 5 starts at 1140px — keep our bar overrides there only.
 * Open/back are tertiary buttons (primary blue via --cm-on-surface); force navy. */
.ecl-mega-menu {
    --ecl-color-branding: var(--ec-menu-bg);
}

.ecl-mega-menu .ecl-mega-menu__open,
.ecl-mega-menu .ecl-mega-menu__open:hover,
.ecl-mega-menu .ecl-mega-menu__open:focus-visible,
.ecl-mega-menu .ecl-mega-menu__open:active,
.ecl-mega-menu .ecl-mega-menu__open:visited,
.ecl-mega-menu .ecl-mega-menu__back,
.ecl-mega-menu .ecl-mega-menu__back:hover,
.ecl-mega-menu .ecl-mega-menu__back:focus-visible {
    color: var(--ec-menu-bg);
}

/* Mobile drawer: keep hover underline on all leaf links.
 * ECL sets text-decoration:none for .ecl-mega-menu__link[aria-expanded]:hover
 * (meant for submenu parents); MegaMenu can leave aria-expanded on plain links. */
@media (max-width: 1139px) {
    .ecl-mega-menu .ecl-mega-menu__list > .ecl-mega-menu__item:not(
            .ecl-mega-menu__item--has-children
        )
        > .ecl-mega-menu__link:hover {
        text-decoration: underline;
    }
}

@media (min-width: 1140px) {
    .ecl-mega-menu {
        --cm-surface-brand: var(--ec-menu-bg);
        --cm-surface-neutral-medium: #b9c5e9;
        --cm-on-surface-brand: #26324b;
    }

    .ecl-mega-menu:not(.ecl-menu--forced-mobile) {
        background: var(--ec-menu-bg);
    }

    .ecl-mega-menu:not(.ecl-menu--forced-mobile) .ecl-mega-menu__link {
        background: var(--ec-menu-bg);
        color: #fff;
    }

    /* Must include :hover — our navy background rule otherwise overrides ECL hover. */
    .ecl-mega-menu:not(.ecl-menu--forced-mobile) .ecl-mega-menu__link:hover {
        background: #b9c5e9;
        color: #26324b;
        text-decoration: none;
    }

    .ecl-mega-menu:not(.ecl-menu--forced-mobile) .ecl-mega-menu__link:focus-visible {
        background: var(--ec-menu-bg);
        color: #fff;
    }
}

/* EC site footer: keep the v4 markup/layout on ECL 5, navy brand (#00002e).
 * ECL 5 moved surface colours to --cm-* tokens and dropped __column grid rules. */
.ecl-site-footer {
    --ecl-color-branding: var(--ec-menu-bg);
    --cm-surface-brand: var(--ec-menu-bg);
    --cm-on-surface-inverted: #fff;
    --cm-border-on-brand: #fff;
    --ecl-link-color: #fff;
    --ecl-link-color-hover: #fff;
    --ecl-link-color-active: #fff;
    background-color: var(--ec-menu-bg);
    color: #fff;
    display: flex;
    justify-content: center;
    margin: 0;
    padding-block: 0.25rem 2rem;
}

.ecl-site-footer .ecl-site-footer__row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font: inherit;
    padding-bottom: 1.5rem;
}

.ecl-site-footer .ecl-site-footer__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

/* ECL 5 adds border-block-start + large gap on following rows; stacks with our border-bottom. */
.ecl-site-footer .ecl-site-footer__row + .ecl-site-footer__row {
    border-block-start: 0;
    margin-block-start: 0;
    padding-block-start: 0;
}

.ecl-site-footer .ecl-site-footer__section {
    margin-block-start: 0;
    margin-inline-start: 0;
    padding-top: 1.5rem;
}

.ecl-site-footer .ecl-site-footer__section > :first-child {
    margin-top: 0;
}

/* Below 768px ECL stacks columns; keep clear space before Related links. */
@media (max-width: 767px) {
    .ecl-site-footer .ecl-site-footer__row {
        row-gap: 2.5rem;
    }
}

/* ECL goes side-by-side from 768px; use a gapped grid from there (not only 996px). */
@media (min-width: 768px) {
    .ecl-site-footer .ecl-site-footer__row {
        column-gap: 2.5rem;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .ecl-site-footer .ecl-site-footer__column {
        min-width: 0;
    }

    .ecl-site-footer .ecl-site-footer__section--split-list {
        padding-top: 1.5rem;
    }
}

.ecl-site-footer .ecl-site-footer__title {
    color: #fff;
    font-weight: 700;
    margin: 0;
}

.ecl-site-footer .ecl-site-footer__title-link,
.ecl-site-footer .ecl-site-footer__title-link:active,
.ecl-site-footer .ecl-site-footer__title-link:focus,
.ecl-site-footer .ecl-site-footer__title-link:visited {
    color: #fff;
    /* Not standalone (inline-block keeps the title on one line); mimic standalone decoration. */
    display: block;
    max-width: 100%;
    text-decoration: none;
}

.ecl-site-footer .ecl-site-footer__title-link:hover {
    color: #fff;
    text-decoration: underline;
}

.ecl-site-footer .ecl-site-footer__section--site-info .ecl-site-footer__title {
    padding-bottom: 1rem;
}

.ecl-site-footer .ecl-site-footer__description {
    font-style: italic;
    line-height: 1.5;
    margin: 0;
    margin-block-start: 0;
}
.ecl-site-footer .ecl-site-footer__list {
    list-style: none;
    margin: 1rem 0 0;
    padding-inline-start: 0;
}

.ecl-site-footer .ecl-site-footer__list-item {
    line-height: 1.375rem;
    margin-top: 1rem;
}

.ecl-site-footer .ecl-site-footer__list-item:first-of-type {
    margin-top: 0;
}

.ecl-site-footer .ecl-site-footer__logo-link {
    display: inline-block;
    margin-bottom: 1.5rem;
}

.ecl-site-footer .ecl-link--inverted,
.ecl-site-footer .ecl-link--inverted:visited,
.ecl-site-footer .ecl-site-footer__link,
.ecl-site-footer .ecl-site-footer__link:visited {
    color: #fff;
}

.ecl-site-footer .ecl-link--inverted:hover,
.ecl-site-footer .ecl-site-footer__link:hover {
    color: #fff;
    text-decoration: underline;
}

.ecl-site-footer .ecl-link--inverted:focus-visible,
.ecl-site-footer .ecl-site-footer__logo-link:focus-visible,
.ecl-site-footer .ecl-site-footer__title-link:focus-visible,
.ecl-site-footer .ecl-site-footer__link:focus-visible {
    outline: 2px solid #fff;
}

/* Breadcrumb: colours only — do not override display/transform.
 * On small screens ECL collapses to a back-link (hides current page, rotates icon). */
.main-layout > .ecl-breadcrumb.ecl-container {
    --ecl-link-color: #0a1f6c;
    --ecl-link-color-hover: #404040;
    --cm-on-surface-brand: #0a1f6c;
    --cm-on-surface-grey: #404040;
    font-size: 0.875rem;
    line-height: 1.25;
    margin-inline: auto;
    margin-block: 0;
    padding-block: 1rem;
}

.main-layout > .ecl-breadcrumb .ecl-breadcrumb__container {
    padding: 0 0 0.5rem;
}

.main-layout > .ecl-breadcrumb .ecl-breadcrumb__link,
.main-layout > .ecl-breadcrumb .ecl-breadcrumb__segment:first-of-type .ecl-breadcrumb__link {
    --ecl-link-text-decoration: none;
    --ecl-link-text-decoration-hover: none;
    color: #0a1f6c;
    /* text-decoration is unreliable when ECL sets display:inline-flex (≥996px). */
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
    border-bottom: 1px solid currentColor;
}

.main-layout > .ecl-breadcrumb .ecl-breadcrumb__link:hover,
.main-layout > .ecl-breadcrumb .ecl-breadcrumb__link:focus,
.main-layout > .ecl-breadcrumb .ecl-breadcrumb__segment:first-of-type .ecl-breadcrumb__link:hover,
.main-layout > .ecl-breadcrumb .ecl-breadcrumb__segment:first-of-type .ecl-breadcrumb__link:focus {
    color: #404040;
    border-bottom-color: currentColor;
}

.main-layout > .ecl-breadcrumb .ecl-breadcrumb__icon {
    color: #0a1f6c;
    fill: currentColor;
}

.main-layout > .ecl-breadcrumb .ecl-breadcrumb__current-page {
    color: #0a1f6c;
}

/* Explanation text */
.explanation {
    font-size: 1rem;
    color: #86858b;
    font-style: italic;
    margin-top: 1vh;
    line-height: 1.6;
}

/* Globe visualization */
#globeViz {
    width: 100%;
    max-width: 100%;
    height: 40vh;
    margin: 2vh auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    background-color: #fff;
}

#time {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #003399;
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.6);
    padding: 2px 6px;
    border-radius: 4px;
}

/* API Examples section */
.api-examples {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    text-align: left;
    font-size: 0.85rem;
    background: #fff;
    padding: 1rem;
    box-sizing: border-box;
}

.examples-toggle {
    cursor: pointer;
    user-select: none;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #9F9F9F;
    width: 100%;
    text-align: center;
}

.examples-toggle.open::after {
    content: '▼';
}

.examples-toggle::after {
    content: '▶';
    font-size: 0.9rem;
}

.examples-collapsible {
    display: none;
    animation: fadeIn 0.2s ease-in-out;
}

.examples-collapsible.open {
    display: block;
}

/* Tabs */
.tabs {
    display: flex;
    border-bottom: 2px solid #ccc;
    margin-bottom: 1rem;
}

.tab {
    padding: 0.5rem 1rem;
    cursor: pointer;
    border: 1px solid #ccc;
    border-bottom: none;
    background: #eee;
    margin-right: 0.5rem;
    color: #404040;
    font-size: 0.9rem;
}

.tab.active {
    background: #fff;
    font-weight: bold;
    color: var(--ec-menu-bg);
    border-color: var(--ec-menu-bg) var(--ec-menu-bg) #fff;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Code blocks */
.code-block-wrapper {
    position: relative;
    display: block;
}

.tab-content pre {
    position: relative;
    background: #f0f0f0;
    padding: 1em;
    overflow-x: auto;
    font-size: 0.85rem;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

.copy-button {
    position: absolute;
    top: 0.3rem;
    right: 0.5rem;
    background-color: var(--ec-menu-bg);
    color: white;
    border: none;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 3px;
    cursor: pointer;
    z-index: 10;
    pointer-events: auto;
}

.copy-button:hover {
    background-color: #000045;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}