/* Local Open Sans variable font (no Google Fonts requests) */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("../assets/fonts/OpenSans-Variable-Latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("../assets/fonts/OpenSans-Variable-LatinExt.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 300 800;
    font-display: swap;
    src: url("../assets/fonts/OpenSans-Variable-Italic-Latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 300 800;
    font-display: swap;
    src: url("../assets/fonts/OpenSans-Variable-Italic-LatinExt.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --md-primary-fg-color: #18345c;
    --md-accent-fg-color: #516b92;
    --md-text-font: "Open Sans";
}

/* Text  adjustment*/
[data-md-color-scheme="default"] {
    --md-code-hl-variable-color: #000000a8;
    --md-code-hl-operator-color: #000000af;
    --md-default-fg-color--light: #333333;
    --md-default-fg-color: #333333;
}

[data-md-color-scheme="slate"] {
    --md-code-hl-number-color: #e76d5f;
    --md-primary-fg-color: #5395ff;
    --md-accent-fg-color: #e0e0e0;
    --md-code-hl-constant-color: #9687e3;
    --md-default-fg-color: rgba(255, 255, 255, 0.75);
    --md-default-fg-color--light: rgba(255, 255, 255, 0.55);
}

.md-typeset h1 {
    margin: 0 0 0.75em;
}

.md-typeset h2 {
    margin: 0.25em 0 0.5em;
}

.md-typeset h3 {
    margin: 0.15em 0 0.4em;
}

/* link color */
[data-md-color-scheme="default"] p a,
[data-md-color-scheme="default"] li a {
    --md-primary-fg-color: #256ADA;
    --md-typeset-a-color: #256ADA;
}

[data-md-color-scheme="slate"] p a,
[data-md-color-scheme="slate"] li a {
    --md-primary-fg-color: #5e91e4;
    --md-typeset-a-color: #5e91e4;
}

/*** Changes for darkmode startpage ***/

/* Change iFrame dark/lightmode  */
[data-md-color-scheme="slate"] iframe[src$="#only-light"],
[data-md-color-scheme="slate"] iframe[src$="#gh-light-mode-only"] {
    display: none;
}

[data-md-color-scheme="default"] iframe[src$="#only-dark"],
[data-md-color-scheme="default"] iframe[src$="#gh-dark-mode-only"] {
    display: none;
}

/* Hide images in darkmode */

[data-md-color-scheme="slate"] img[src$="#only-light"],
[data-md-color-scheme="slate"] img[src$="#gh-light-mode-only"] {
    display: none;
    /* Hide light images in dark mode */
}

/* Dark mode button styles */
[data-md-color-scheme="slate"] .md-button {
    color: var(--md-typeset-color);
    border-color: var(--md-typeset-color);
}

[data-md-color-scheme="slate"] .md-button:hover {
    color: var(--md-typeset-color);
    background-color: #0f1e32;
}

/*** Header Dark/Defaultmode ***/
[data-md-color-scheme="default"] header {
    background-color: #18345c;
}

[data-md-color-scheme="default"] header>nav.md-tabs {
    background-color: #f2f2f2;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

[data-md-color-scheme="default"] .md-tabs__link {
    color: var(--md-default-fg-color);
}

/* The theme marks the active tab with font-weight:500 on the <li>. A directly
   set property always wins over an inherited one, so that 500 overrode the
   700 every other tab inherits from the nav rule above — the active tab
   rendered THINNER than its siblings instead of standing out. Bump it past
   the 700 baseline; tabs-active.js reuses this same theme class to highlight
   the homepage section currently in view, so the fix covers both. */
.md-tabs__item--active {
    font-weight: 800;
}

[data-md-color-scheme="slate"] header,
nav>label {
    background-color: #18345c;
}

[data-md-color-scheme="slate"] header>nav.md-tabs {
    background-color: rgba(45, 48, 59, 0.678);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/*Header mobile side menu*/

@media screen and (max-width: 76.2344em) {
    /* Remove top/side margins so title bar is flush with drawer container */
    .md-sidebar--primary .md-nav--primary {
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
    }

    /* Drawer title bar - flush with container, clips to its .8rem border-radius */
    .md-nav--primary .md-nav__title[for=__drawer] {
        background-color: #18345c;
        color: white;
        margin: 0;
        margin-bottom: .6rem;
        border-top-left-radius: .8rem;
        border-top-right-radius: .8rem;
    }

    /* Back button title in nested drawer navigation */
    .md-nav--primary .md-nav__title {
        color: white;
        background-color: #18345c;
    }

    .md-nav--primary .md-nav__title .md-nav__icon {
        color: white;
    }

    /* Hide logo from drawer sidebar (it's in the header instead) */
    .md-nav--primary .md-nav__title .md-logo {
        display: none;
    }

    /* Reorder: hamburger first, then logo */
    .md-header__button.md-icon[for="__drawer"] {
        order: -1;
    }

    /* Logo in mobile header: visible, right next to hamburger */
    .md-header__button.md-logo {
        display: block;
        margin-left: 0;
        padding: 0;
    }

    .md-header__button.md-logo img,
    .md-header__button.md-logo svg {
        height: clamp(0.9rem, 3vw, 1.2rem);
    }

}

/* Hide registration button on very small screens */
@media screen and (max-width: 30em) {
    .header-button {
        display: none !important;
    }
}

/* Font size */

p,
ul,
li {
    font-size: 16px;
}

@media screen and (max-width: 44.9375em) {
    p,
    ul,
    li {
        font-size: 15px;
    }
}

.md-nav__item {
    font-size: 15px;
}

/* Hide current page title in header */

.md-header__topic {
    display: none;
}

/* CSS for Header-button linking to SmartMaps registration, button is added in "header.html" in partial folder */

.header-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #18345c;
    color: #fff;
    border: 1px solid #fff;
    border-radius: .3rem;
    cursor: pointer;
    font-weight: 700;
    white-space: nowrap;
    font-size: 16px;
    margin-left: 8px;
    padding: .5em 1.2em;
    transition: background-color 125ms, color 125ms;
}

/* Desktop button size */
@media screen and (min-width: 76.25em) {
    .header-button {
        font-size: 16px;
        margin-left: 15px;
        padding: .55em 1.4em;
    }
}

.header-button:hover {
    background-color: #fff;
    color: #18345c;
    border-color: #fff;
}

/* Homepage contact-section buttons: branded (solid navy) to match the header CTA */
.contact-item .md-button {
    background-color: #18345c;
    color: #fff;
    border: 1px solid #18345c;
    border-radius: .3rem;
    font-weight: 700;
    transition: background-color 125ms, border-color 125ms;
}
.contact-item .md-button:hover,
.contact-item .md-button:focus {
    background-color: #21406f;
    border-color: #21406f;
    color: #fff;
}

/* accessible keyboard focus rings */
.header-button:focus-visible,
.contact-item .md-button:focus-visible,
.feature-item a:focus-visible {
    outline: 2px solid #f6b80c;
    outline-offset: 2px;
}

/* Reduce gap between header and content */
.md-main__inner {
    margin-top: 1rem;
}

/* Logo size in header */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
    height: 1.5rem;
}

.md-header__button {
    color: white;
}

/* Search button visibility on dark header (Zensical uses button, not input) */
.md-header .md-search__button {
    background-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
}

.md-header .md-search__button:hover {
    background-color: rgba(255, 255, 255, 0.22);
    color: white;
}

.md-header .md-search__button::before {
    background-color: rgba(255, 255, 255, 0.7);
}

.md-header .md-search__button::after {
    background-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.6);
}

/* Homepage tile links - no underline */
.feature-item a {
    text-decoration: none;
}

/* Better mobile table scrolling */
.md-typeset__scrollwrap {
    -webkit-overflow-scrolling: touch;
}

.md-typeset__table table th,
.md-typeset__table table td {
    white-space: nowrap;
}

/* Add right column border to table cells */
th,
td {
    border-right: 1px solid var(--md-typeset-table-color);
}

/* The nav starts with 6 entries that exist purely to build the tab bar: Home
   plus the five homepage jump links (#maps, #geoservices, #data, #services,
   #guides). Everything from the 7th entry on is real content.

   Two consequences, and both rules below depend on that same order — if the
   first six nav entries ever change, adjust both:
   1. the tab bar shows only those first six, and
   2. the drawer hides the five jump links, because the sections they point to
      are already listed underneath (e.g. "Leitfäden" appeared twice). */
.md-tabs__list li:nth-child(n+7) {
    display: none;
}
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(n+2):nth-child(-n+6) {
    display: none;
}

/* --- Coverage table: filter, country lookup, sticky first column & scroll affordance --- */
.coverage-filter {
    width: 100%;
    max-width: 420px;
    padding: 8px 12px;
    margin: 0 0 6px;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 6px;
    font-size: .8rem;
    background: var(--md-default-bg-color);
    color: var(--md-default-fg-color);
}
.coverage-count {
    margin: 0 0 12px;
    font-size: .7rem;
    color: var(--md-default-fg-color--light);
}
/* ---------------------------------------------------------------------------
   Language switcher (header) — segmented toggle, as on smartmaps.net

   Both languages stay visible with a divider between them; the active one is
   filled. The header is #18345c in both colour schemes, so this is styled for a
   dark background only — no scheme-specific overrides needed.
   --------------------------------------------------------------------------- */
/* Dimensions and colours are taken from the search field next to it
   (height 1.6rem, radius .4rem, font-size .7rem, translucent white fill), so
   both read as the same kind of control. Deliberately no solid white border or
   fill — that made the switcher louder than the "Kostenlos starten" button. */
.lang-switch {
    display: flex;
    align-items: stretch;
    height: 1.6rem;
    margin: 0 .4rem;
    background-color: rgba(255, 255, 255, .12);
    border-radius: .4rem;
    overflow: hidden;
    line-height: 1;
}
.lang-switch__item {
    display: flex;
    align-items: center;
    padding: 0 .5rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    transition: background-color 250ms, color 250ms;
}
/* hairline divider, just enough to separate the two segments */
.lang-switch__item + .lang-switch__item {
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .18);
}
.lang-switch__item:hover {
    background-color: rgba(255, 255, 255, .18);
    color: #fff;
}
/* current language: a step stronger than hover, so the two never look alike */
.lang-switch__item--active,
.lang-switch__item--active:hover {
    background-color: rgba(255, 255, 255, .3);
    color: #fff;
}
.lang-switch__item:focus-visible {
    outline: 2px solid #f6b80c;
    outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
    .lang-switch__item {
        transition: none;
    }
}

/* Below 60em the header runs out of room (logo, title, search field and the CTA
   already fill it), so the switcher moves into the navigation drawer, which is
   where navigation lives at that width anyway. Exactly one copy is ever shown. */
.lang-switch--drawer {
    display: none;
}
@media screen and (max-width: 59.9375em) {
    .lang-switch--header {
        display: none;
    }
    .lang-switch--drawer {
        display: flex;
        height: 1.8rem;
        margin: .6rem .8rem .2rem;
        /* the drawer sits on a light background, so invert the treatment */
        background-color: transparent;
        border: 1px solid var(--md-default-fg-color--lighter);
        width: max-content;
    }
    .lang-switch--drawer .lang-switch__item {
        padding: 0 .7rem;
        color: var(--md-default-fg-color--light);
    }
    .lang-switch--drawer .lang-switch__item + .lang-switch__item {
        box-shadow: inset 1px 0 0 var(--md-default-fg-color--lighter);
    }
    .lang-switch--drawer .lang-switch__item:hover {
        background-color: rgba(24, 52, 92, .08);
        color: #18345c;
    }
    .lang-switch--drawer .lang-switch__item--active,
    .lang-switch--drawer .lang-switch__item--active:hover {
        background-color: #18345c;
        color: #fff;
    }
}
[data-md-color-scheme="slate"] .lang-switch--drawer .lang-switch__item:hover {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
}

/* ---------------------------------------------------------------------------
   Parameter tables (Name | Description | Data type | Default value)

   A single long description used to stretch the table far past the content
   width. Fixed layout pins the narrow columns and forces the description to
   wrap instead of widening the table.
   --------------------------------------------------------------------------- */
.md-typeset .param-table table:not([class]) {
    table-layout: fixed;
    width: 100%;
    display: table;
}
.md-typeset .param-table th,
.md-typeset .param-table td {
    white-space: normal;
    overflow-wrap: break-word;
    vertical-align: top;
}
.md-typeset .param-table th:first-child,
.md-typeset .param-table td:first-child {
    width: 6.5em;
}
.md-typeset .param-table th:nth-child(3),
.md-typeset .param-table td:nth-child(3) {
    width: 11em;
}
.md-typeset .param-table th:nth-child(4),
.md-typeset .param-table td:nth-child(4) {
    width: 7em;
}
/* comma-joined value lists (`auto`,`light`,…) must be allowed to break */
.md-typeset .param-table code {
    white-space: normal;
    overflow-wrap: anywhere;
}
@media screen and (max-width: 44.9375em) {
    /* narrow screens: let the table scroll rather than squeeze every column */
    .md-typeset .param-table table:not([class]) {
        table-layout: auto;
        min-width: 32rem;
    }
}

/* denser cells so all service columns fit without cutting off */
.md-typeset .coverage-table th,
.md-typeset .coverage-table td {
    padding: .45em .4rem;
    font-size: .78rem;
}
/* keep the identity (ISO) column visible while scrolling right */
.md-typeset .coverage-table th:first-child,
.md-typeset .coverage-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--md-default-bg-color);
}
/* narrower country column so more service columns fit at a glance */
.md-typeset .coverage-table th:nth-child(2),
.md-typeset .coverage-table td:nth-child(2) {
    max-width: 8em;
    white-space: normal;
    overflow-wrap: break-word;
}
/* center the service columns; headers wrap only at spaces (no mid-word breaks) */
.md-typeset .coverage-table th:nth-child(n+3),
.md-typeset .coverage-table td:nth-child(n+3) {
    text-align: center;
}
.cov-yes,
.cov-no {
    display: inline-block;
    min-width: 1.5em;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: .8em;
    line-height: 1.5;
}
.cov-yes {
    background: rgba(26, 138, 58, .16);
    color: #1a8a3a;
}
[data-md-color-scheme="slate"] .cov-yes {
    background: rgba(78, 201, 122, .18);
    color: #6ee7a0;
}
.cov-no {
    background: var(--md-default-fg-color--lightest);
    color: var(--md-default-fg-color--light);
}