/* ==========================================================================
   Pyrgos Limassol — inner pages
   Layout for the generated section pages: title banner, content column,
   section sidebar and the draft notice that marks placeholder copy.
   ========================================================================== */

.pyr-banner {
    background: #08315f;
    padding: 46px 0 40px;
}

.pyr-banner h1 {
    margin: 0 0 8px;
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.15;
}

.pyr-crumbs {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
}

.pyr-crumbs a { color: rgba(255, 255, 255, .85); }
.pyr-crumbs a:hover { color: #d98c3f; }

.pyr-lang {
    margin-left: 14px;
    padding: 2px 9px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 3px;
    font-size: 11px;
    letter-spacing: .06em;
}

.pyr-page { padding: 48px 0 64px; }

.pyr-main {
    font-size: 16px;
    line-height: 1.7;
    color: #3c4a55;
}

.pyr-main p { margin: 0 0 18px; }
.pyr-main ul { margin: 0 0 20px; padding-left: 20px; }
.pyr-main li { margin-bottom: 7px; }

.pyr-main h2 {
    margin: 32px 0 14px;
    color: #08315f;
    font-size: 23px;
    font-weight: 700;
}

/* The draft notice has to be impossible to mistake for council information. */
.pyr-draft {
    margin: 0 0 26px;
    padding: 13px 16px;
    border-left: 4px solid #b5661e;
    background: #fbf3ea;
    color: #7a4a15;
    font-size: 14px;
    line-height: 1.5;
}

.pyr-sidenav {
    padding: 22px 24px;
    border: 1px solid #e2e8ef;
    border-radius: 4px;
    background: #f6f8fa;
}

.pyr-sidenav h4 {
    margin: 0 0 12px;
    color: #08315f;
    font-size: 16px;
    font-weight: 700;
}

.pyr-sidenav ul { margin: 0; padding: 0; list-style: none; }

.pyr-sidenav li { border-top: 1px solid #e6ecf1; }
.pyr-sidenav li:first-child { border-top: 0; }

.pyr-sidenav a {
    display: block;
    padding: 9px 0;
    color: #3c4a55;
    font-size: 14.5px;
}

.pyr-sidenav a:hover { color: #0959a5; }

.pyr-sidenav li.active > a {
    color: #0959a5;
    font-weight: 600;
}

@media (max-width: 991px) {
    .pyr-banner { padding: 34px 0 30px; }
    .pyr-banner h1 { font-size: 27px; }
    .pyr-page { padding: 34px 0 46px; }
    .pyr-sidenav { margin-top: 34px; }
}

/* Photo galleries ---------------------------------------------------------- */

.pyr-gal-h {
    margin: 38px 0 16px;
    color: #08315f;
    font-size: 21px;
    font-weight: 700;
}

.pyr-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}

.pyr-tile {
    display: block;
    overflow: hidden;
    border-radius: 3px;
    background: #e8edf1;
    aspect-ratio: 4 / 3;
}

.pyr-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.pyr-tile:hover img { transform: scale(1.05); }

@media (max-width: 575px) {
    .pyr-gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* Home page ---------------------------------------------------------------- */

.pyr-hero {
    position: relative;
    overflow: hidden;
    background: #08315f;
}

/* Slides are stacked and cross-faded; only the active one is opaque. */
.pyr-slides {
    position: absolute;
    inset: 0;
}

.pyr-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity .9s ease;
}

.pyr-slide.is-on { opacity: 1; }

.pyr-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pyr-slide figcaption {
    position: absolute;
    right: 18px;
    bottom: 54px;
    max-width: 44%;
    padding: 5px 11px;
    border-radius: 3px;
    background: rgba(8, 49, 95, .62);
    color: rgba(255, 255, 255, .92);
    font-family: Roboto, sans-serif;
    font-size: 12.5px;
    text-align: right;
}

.pyr-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    background: rgba(8, 49, 95, .38);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.pyr-arrow:hover { background: rgba(8, 49, 95, .72); }
.pyr-arrow:focus-visible { outline: 2px solid #d98c3f; outline-offset: 2px; }
.pyr-prev { left: 16px; }
.pyr-next { right: 16px; }

.pyr-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    z-index: 3;
    display: flex;
    gap: 8px;
    justify-content: center;
}

.pyr-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
}

.pyr-dot.is-on { background: #d98c3f; transform: scale(1.25); }
.pyr-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .pyr-slide { transition: none; }
}

/* The two hero buttons wrap on a narrow screen and the second one reaches the
   right edge, exactly where a floating caption used to sit on top of it. Below
   768px the caption stops floating and becomes a strip along the bottom edge,
   with the dots and the hero text lifted clear of it. */
@media (max-width: 767px) {
    .pyr-arrow { display: none; }
    .pyr-slide figcaption {
        left: 0;
        right: 0;
        bottom: 0;
        max-width: none;
        padding: 7px 16px;
        border-radius: 0;
        background: rgba(8, 49, 95, .72);
        font-size: 11.5px;
        text-align: center;
        /* Kept to one line so the strip's height stays known and the dots
           above it cannot be pushed into the buttons by a longer caption. */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .pyr-dots { bottom: 44px; }
}

/* The scrim only has to carry the text. The earlier one ran from 92% to 30%
   opacity across the whole width, which flattened the photograph into a blue
   field and hid the fact that the slides were changing at all. This fades out
   by the middle and leans on a text shadow for the rest of the legibility. */
.pyr-hero-in {
    position: relative;
    z-index: 2;
    padding: 116px 0 104px;
    background:
        linear-gradient(90deg,
            rgba(6, 34, 66, .74) 0%,
            rgba(6, 34, 66, .52) 26%,
            rgba(6, 34, 66, .18) 52%,
            rgba(6, 34, 66, 0) 72%),
        linear-gradient(180deg, rgba(6, 34, 66, .28) 0%, rgba(6, 34, 66, 0) 22%);
}

.pyr-hero h1,
.pyr-kicker,
.pyr-lead {
    text-shadow: 0 1px 14px rgba(4, 22, 44, .55);
}

.pyr-kicker {
    margin: 0 0 6px;
    color: #d98c3f;
    font-family: Roboto, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .13em;
}

.pyr-hero h1 {
    margin: 0 0 16px;
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.08;
}

.pyr-lead {
    max-width: 34em;
    margin: 0 0 26px;
    color: rgba(255,255,255,.92);
    font-size: 17.5px;
    line-height: 1.6;
}

.pyr-cta { margin: 0; }

.pyr-btn {
    display: inline-block;
    margin: 0 10px 10px 0;
    padding: 13px 26px;
    border-radius: 3px;
    background: #d98c3f;
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
}

.pyr-btn:hover { background: #b5661e; color: #fff; }

.pyr-btn2 {
    background: transparent;
    border: 1px solid rgba(255,255,255,.55);
}

.pyr-btn2:hover { background: rgba(255,255,255,.12); }

.pyr-home { padding: 56px 0 68px; }

.pyr-panel {
    margin-bottom: 16px;
    padding: 20px 22px;
    border: 1px solid #e2e8ef;
    border-radius: 4px;
    background: #f6f8fa;
}

.pyr-panel h4 {
    margin: 0 0 12px;
    color: #08315f;
    font-size: 16px;
    font-weight: 700;
}

.pyr-more { font-size: 14px; font-weight: 600; color: #0959a5; }

.pyr-quick { margin: 0; padding: 0; list-style: none; }
.pyr-quick li { border-top: 1px solid #e6ecf1; }
.pyr-quick li:first-child { border-top: 0; }
.pyr-quick a { display: block; padding: 9px 0; color: #3c4a55; font-size: 14.5px; }
.pyr-quick a:hover { color: #0959a5; }

.pyr-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 14px;
    margin-top: 46px;
}

.pyr-card {
    display: block;
    padding: 24px 24px 22px;
    border: 1px solid #e2e8ef;
    border-top: 3px solid #0959a5;
    border-radius: 4px;
    background: #fff;
    transition: box-shadow .25s ease, transform .25s ease;
}

.pyr-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(8,49,95,.11);
}

.pyr-card h3 {
    margin: 0 0 8px;
    color: #08315f;
    font-size: 19px;
    font-weight: 700;
}

.pyr-card p { margin: 0; color: #5c6b7a; font-size: 14.5px; line-height: 1.55; }

.pyr-office {
    margin-top: 48px;
    padding: 30px 32px;
    border-radius: 4px;
    background: #08315f;
}

.pyr-office h2 { margin: 0 0 18px; color: #fff; font-size: 21px; font-weight: 700; }

.pyr-office ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pyr-office span {
    display: block;
    margin-bottom: 3px;
    color: rgba(255,255,255,.62);
    font-size: 11.5px;
    letter-spacing: .07em;
}

.pyr-office strong { color: #fff; font-size: 15.5px; font-weight: 600; }

@media (max-width: 767px) {
    .pyr-hero-in { padding: 58px 0 78px; }   /* clears the dots and caption strip */
    .pyr-hero h1 { font-size: 32px; }
    .pyr-lead { font-size: 15.5px; }
}

/* Forms -------------------------------------------------------------------- */

.pyr-form { max-width: 640px; margin-top: 28px; }

.pyr-field { margin-bottom: 18px; }

.pyr-field label {
    display: block;
    margin-bottom: 6px;
    color: #08315f;
    font-family: Roboto, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
}

.pyr-req, .pyr-opt {
    margin-left: 6px;
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: .04em;
}

.pyr-req { color: #b5661e; }
.pyr-opt { color: #93a1b0; }

.pyr-field input,
.pyr-field select,
.pyr-field textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #ccd6de;
    border-radius: 3px;
    background: #fff;
    color: #24323d;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
}

.pyr-field textarea { resize: vertical; }

.pyr-field input:focus,
.pyr-field select:focus,
.pyr-field textarea:focus {
    outline: 2px solid #0959a5;
    outline-offset: 1px;
    border-color: #0959a5;
}

.pyr-field .pyr-invalid { border-color: #b5661e; background: #fdf6f0; }

.pyr-err {
    display: block;
    margin-top: 5px;
    min-height: 1em;
    color: #a8441a;
    font-size: 13px;
}

.pyr-submit {
    padding: 13px 32px;
    border: 0;
    border-radius: 3px;
    background: #0959a5;
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.pyr-submit:hover { background: #08315f; }
.pyr-submit:focus-visible { outline: 2px solid #d98c3f; outline-offset: 2px; }

.pyr-formnote {
    margin: 14px 0 0;
    color: #6b7a89;
    font-size: 13.5px;
    line-height: 1.55;
}

/* Menu fit ------------------------------------------------------------------
   The theme sets 18px labels with 16px side margins, sized for short English
   words. The Greek labels are longer, so six of them plus the search icon and
   the app button overflowed the row and wrapped onto a second line. Loaded
   after the theme, so the same selector wins on order. */

.nupur_menu > ul > li > a {
    margin-left: 9px;
    margin-right: 9px;
    font-size: 16px;
}

/* The payments label is far longer than the template's "Get an App", and the
   menu row has no slack: at 1440 the items need 660px of the 620px left over,
   so the nav wrapped to a second line. Trimming the button gives it back. */
.nupur-main-menu .dtbtn {
    white-space: nowrap;
    margin-left: 14px;
    /* Outlined like the mobile one. The theme's .dtbtn sets border:none, so
       the border is restated here, and the padding gives back its 2px so the
       button keeps the width the menu row was measured against. */
    padding: 7px 12px;
    border: 2px solid #0959a5;
    background: #fff;
    color: #0959a5;
    font-size: 15px;
    letter-spacing: .01em;
}

.nupur-main-menu .dtbtn:hover,
.nupur-main-menu .dtbtn:focus {
    background: #0959a5;
    color: #fff;
}

/* Scrolled, the bar goes to rgba(0,0,0,.7); the white face still carries it. */
.nupur_nav_area.prefix .dtbtn {
    border-color: #fff;
}

.nupur_nav_area.prefix .dtbtn:hover,
.nupur_nav_area.prefix .dtbtn:focus {
    background: #0959a5;
    border-color: #0959a5;
    color: #fff;
}

@media (min-width: 1400px) {
    .nupur_menu > ul > li > a {
        margin-left: 13px;
        margin-right: 13px;
        font-size: 17px;
    }
}

/* Language switch --------------------------------------------------------- */
/* Lives in the top bar so it is present on every page. Each link points at the
   same page in the other language rather than at that language's home page. */

/* The theme's top-right cell stacks its children, which dropped the switch
   onto a second line and made the bar taller. Lay the cell out as one row. */
.top-right-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.top-right-menu .social-icons {
    margin: 0;
    padding: 0;
}

.pyr-langbar {
    display: flex;
    gap: 3px;
}

@media (max-width: 991px) {
    .top-right-menu { justify-content: center; }
}

.pyr-langbar a {
    padding: 3px 9px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 3px;
    color: rgba(255, 255, 255, .85);
    font-family: Roboto, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    line-height: 1.5;
}

.pyr-langbar a:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.pyr-langbar a.is-on {
    background: #fff;
    border-color: #fff;
    color: #0959a5;
}

.pyr-langbar a:focus-visible {
    outline: 2px solid #d98c3f;
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .pyr-langbar { margin-left: 10px; }
}

/* Wherever the mobile menu bar exists — anything under 992px — that bar
   carries the language switch, and the top bar's own copy stands down. One
   behaviour across every mobile width instead of a split at 571px. */
.pyr-langbar--mobile { display: none; }

@media (max-width: 991px) {
    .pyr-langbar--mobile { display: flex; }

    /* The top bar keeps its phone, mail and social icons, but not this. */
    .top-right-menu .pyr-langbar:not(.pyr-langbar--mobile) { display: none; }

    /* No-JS fallback: the switch stays in the white band, where the
       top-bar colours would be invisible. Tapped, so roomier too. */
    .pyr-langbar--mobile a {
        min-width: 46px;
        padding: 9px 12px;
        border-color: #c8d3e0;
        color: #0b3a6b;
        font-size: 12px;
        text-align: center;
    }

    .pyr-langbar--mobile a:hover { background: #eef3f9; color: #0b3a6b; }

    .pyr-langbar--mobile a.is-on {
        background: #0b3a6b;
        border-color: #0b3a6b;
        color: #fff;
    }
}

/* News band --------------------------------------------------------------- */
/* Directly under the hero. The president's message is the standing item on the
   left; the dated notices run beside it. */

.pyr-newsband {
    padding: 52px 0 10px;
    background: #f6f8fa;
    border-bottom: 1px solid #e6ecf1;
}

.pyr-bandtitle {
    margin: 0 0 18px;
    color: #08315f;
    font-family: Roboto, sans-serif;
    font-size: 26px;
    font-weight: 700;
}

.pyr-newsgrid {
    display: grid;
    grid-template-columns: minmax(280px, 5fr) 7fr;
    gap: 18px;
    align-items: start;
}

.pyr-msg {
    display: block;
    padding: 26px 28px 24px;
    border: 1px solid #dbe3ea;
    border-top: 3px solid #b5661e;
    border-radius: 4px;
    background: #fff;
    transition: box-shadow .25s ease;
}

.pyr-msg:hover { box-shadow: 0 8px 26px rgba(8, 49, 95, .10); }

.pyr-cat {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 9px;
    border-radius: 2px;
    background: #e8eef4;
    color: #0959a5;
    font-family: Roboto, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.pyr-cat--msg { background: #f6e9dc; color: #8a4a14; }

.pyr-msg h3 {
    margin: 0 0 10px;
    color: #08315f;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
}

.pyr-msg p {
    margin: 0 0 16px;
    color: #4a5a66;
    font-size: 15px;
    line-height: 1.6;
}

.pyr-sign {
    display: block;
    margin-bottom: 14px;
    padding-top: 13px;
    border-top: 1px solid #edf1f5;
    color: #6b7a89;
    font-size: 13px;
    line-height: 1.4;
}

.pyr-sign strong {
    display: block;
    color: #08315f;
    font-family: Roboto, sans-serif;
    font-size: 14.5px;
    font-weight: 700;
}

.pyr-more { color: #0959a5; font-family: Roboto, sans-serif; font-size: 14px; font-weight: 600; }

.pyr-newslist {
    display: grid;
    gap: 10px;
}

.pyr-news {
    display: block;
    padding: 15px 20px;
    border: 1px solid #e2e8ef;
    border-left: 3px solid #0959a5;
    border-radius: 3px;
    background: #fff;
    transition: border-left-color .2s ease, transform .2s ease;
}

.pyr-news:hover { border-left-color: #d98c3f; transform: translateX(2px); }

.pyr-news h3 {
    margin: 0 0 4px;
    color: #08315f;
    font-family: Roboto, sans-serif;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.3;
}

.pyr-news p { margin: 0; color: #5c6b7a; font-size: 14px; line-height: 1.5; }
.pyr-news .pyr-cat { margin-bottom: 6px; }

.pyr-bandmore { margin: 22px 0 0; }
.pyr-bandmore a { color: #0959a5; font-family: Roboto, sans-serif; font-weight: 600; }

@media (max-width: 900px) {
    .pyr-newsgrid { grid-template-columns: 1fr; }
    .pyr-newsband { padding-top: 38px; }
    .pyr-bandtitle { font-size: 22px; }
}

/* Дата рядом с категорией в карточке новости. */
.pyr-news .pyr-meta { display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px; flex-wrap: wrap; }
.pyr-news .pyr-meta .pyr-cat { margin-bottom: 0; }
.pyr-news .pyr-meta time { font-size: 13px; color: #6b7b8f; letter-spacing: .02em; }

/* Страница объявлений: каждое — как отдельный лист совета. */
.pyr-notice { border: 1px solid #e3e8ef; border-radius: 6px; padding: 26px 30px;
    margin-bottom: 22px; background: #fff; }
.pyr-notice > header { display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px; flex-wrap: wrap; }
.pyr-notice > header time { font-size: 14px; color: #6b7b8f; }
.pyr-notice h2 { font-size: 22px; line-height: 1.35; margin: 0 0 14px; }
.pyr-notice ol { list-style: decimal outside; margin: 0 0 16px 22px; padding: 0; }
.pyr-notice ol li { list-style: decimal outside; margin-bottom: 6px; }
.pyr-notice .pyr-when { font-weight: 600; }
.pyr-notice .pyr-sigline { color: #6b7b8f; font-style: italic; margin-bottom: 0; }
.pyr-notice p:last-child { margin-bottom: 0; }

/* Обращение председателя: портрет и письмо рядом ------------------------- */
/* Оригинал всего 200x222, поэтому показываем 180 — апскейлить лицо нельзя. */
.pyr-message {
    display: flex;
    align-items: flex-start;
    gap: 34px;
}

.pyr-portrait {
    flex: 0 0 180px;
    margin: 5px 0 0;
}

.pyr-portrait img {
    display: block;
    width: 180px;
    height: auto;
    border-radius: 4px;
}

.pyr-portrait figcaption {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.45;
}

.pyr-portrait figcaption strong { display: block; color: #0b3a6b; }
.pyr-portrait figcaption span { color: #6b7b8f; font-size: 13px; }

.pyr-msgtext { flex: 1 1 auto; min-width: 0; }

.pyr-salutation {
    color: #0b3a6b;
    font-size: 17px;
    font-weight: 600;
}

.pyr-signoff { margin-bottom: 2px; }

.pyr-signature {
    color: #0b3a6b;
    font-size: 16px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .pyr-message { flex-direction: column; gap: 20px; }
    .pyr-portrait { flex: none; }
}


/* Mobile header band ------------------------------------------------------ */
/* It used to stack a language row over a centred logo and cost 189px before
   the menu bar even started. One wrapping flex row instead: logo left, then
   language and payments pushed right. Where all three fit they share a line;
   where they do not, the payments button drops to its own full-width line
   rather than squeezing the council's name out. */
@media (max-width: 991px) {
    .mobile_logo_area .mobile_menu_logo {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px 12px;
        padding: 8px 0;
        text-align: left;
    }

    /* Horizontal lockup here; the stacked one is for the drawer. */
    /* The two injected controls sit before the logo in the markup, so order
       puts things back; margin-right:auto on the logo pushes whatever else is
       visible to the right, whichever of the two that happens to be. */
    .mobile_menu_logo a.site-logo--stacked {
        order: 1;
        flex: 0 0 auto;        /* the button gives way, never the name */
        flex-direction: row;
        gap: 10px;
        align-items: center;
        min-width: 0;
        margin: 0;
    }

    .mobile_menu_logo .site-logo__emblem { width: 44px; height: 44px; }
    .mobile_menu_logo .site-logo--stacked .site-logo__name { align-items: flex-start; }
    .mobile_menu_logo .site-logo__name-top { font-size: 9.5px; }
    .mobile_menu_logo .site-logo__name-main { font-size: 15px; }

    .pyr-langbar--mobile { order: 2; }

    /* Both labels are two words, so when the row runs out of room the button
       breaks across two lines and stays beside the logo instead of taking a
       line of its own. It only drops below once even the longer word will
       not fit. */
    .dtbtn.pyr-pay--mobile {
        order: 3;
        /* basis 0 so a long label never trips the line break before it has a
           chance to shrink; grow takes the space that is actually left;
           max-content stops it stretching wider than one line needs. */
        flex: 1 1 0;
        min-width: 92px;
        max-width: max-content;
        margin-left: auto;     /* keeps it flush right if it does wrap below */
        display: block;
        /* Outlined, not filled: on the white band a solid block competes with
           the emblem, and the theme's .dtbtn sets border:none, so the border
           has to be restated here. Padding is trimmed by the border width so
           the button keeps its height. */
        padding: 7px 13px;
        border: 2px solid #0959a5;
        border-radius: 4px;
        background: #fff;
        color: #0959a5;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .02em;
        line-height: 1.25;
        white-space: normal;
        text-align: center;
    }

    .dtbtn.pyr-pay--mobile:hover,
    .dtbtn.pyr-pay--mobile:focus {
        background: #0959a5;
        color: #fff;
    }
}

/* Once it wraps it is alone on its line, so it may as well be easy to hit. */
/* Language switch, once header.js has moved it into the generated menu bar.
   The bar sets content-box on everything inside it, hence the explicit reset;
   The "Menu" label is gone, so the switch takes the left end and the burger
   keeps the right. Colours flip to the on-blue set — these selectors outrank
   the on-white ones above, which stay the no-JS fallback. */
@media (max-width: 991px) {
    .mean-container { position: relative; }

    .mean-container > .pyr-langbar--mobile {
        position: absolute;
        top: 14px;
        left: 12px;           /* where the "Menu" label used to sit */
        z-index: 1000000;     /* the bar itself sits at 999999 */
        display: flex;
        gap: 4px;
        height: 32px;
    }

    .mean-container > .pyr-langbar--mobile a,
    .mean-container > .pyr-langbar--mobile {
        box-sizing: border-box;
    }

    .mean-container > .pyr-langbar--mobile a {
        min-width: 38px;
        padding: 0 10px;
        border-color: rgba(255, 255, 255, .5);
        color: #fff;
        font-size: 12px;
        line-height: 30px;
        text-align: center;
    }

    .mean-container > .pyr-langbar--mobile a:hover {
        background: rgba(255, 255, 255, .16);
        color: #fff;
    }

    .mean-container > .pyr-langbar--mobile a.is-on {
        background: #fff;
        border-color: #fff;
        color: #0959a5;
    }
}


/* The bar's "Menu" label is a pseudo-element from the theme's plugin sheet.
   The burger already says what the bar is, and the space is wanted for the
   language switch. */
.mean-container .mean-bar::before { display: none; }