/*
 * Additions to the Helendo theme (assets/css). The theme is used as it ships; this file only holds what
 * the theme has no markup for: messages from the server, form elements standing where the theme expects
 * a link, and the trimmed-down header and footer.
 */

/* Form fields ------------------------------------------------------------------------------------ */

/* The theme turns the text of a field to its accent colour while the field has the focus; that gold is not
   readable as text. The border keeps the accent, the text stays dark. The selectors repeat the theme's own so
   this rule outweighs it. */
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=range]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=week]:focus,
input[type=time]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=color]:focus,
textarea:focus,
select:focus {
    color: #222;
}

/* Header and footer ------------------------------------------------------------------------------ */

.logo img,
.footer-logo img {
    height: 36px;
    width: auto;
}

.footer-copyright-area--standalone {
    padding-top: 40px;
}

.mobile-navigation-close-icon {
    cursor: pointer;
}

/* Header menus (language, account) ------------------------------------------------------------------ */

.header-menu {
    position: relative;
}

.header-menu__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: #000;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.header-menu__toggle .icon-chevron-down {
    font-size: 11px;
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.header-menu__toggle[aria-expanded="true"] .icon-chevron-down {
    transform: rotate(180deg);
}

/* The account menu opens from the icon the theme gives every entry of the header's right side. */
.header-menu__toggle .icon-user {
    font-size: 24px;
}

.header-menu__list {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 1000;
    min-width: 180px;
    margin: 0;
    padding: 8px 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);
    text-align: left;
}

.header-menu__list[hidden] {
    display: none;
}

/* The theme sizes every link of the header's right side as an icon (24px); the entries are links, so the
   selector has to outweigh that rule. */
.header-menu .header-menu__list .header-menu__item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    padding: 8px 20px;
    color: #666;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Signing out is a form; its button looks like the links around it. */
.header-menu__list form {
    margin: 0;
}

.header-menu__list button.header-menu__item {
    border: 0;
    background: none;
    cursor: pointer;
}

.header-menu__item:hover,
.header-menu__item:focus-visible,
.header-menu__item[aria-current="true"] {
    color: #000;
}

.header-menu__item[aria-current="true"] {
    font-weight: 500;
}

/*
 * Dropdown entries (account and language menus, submenus of the main menu). The highlight of the pointer, the
 * keyboard and the current entry has no background: a short bar in the accent colour grows at the left edge and the
 * text, nudged towards it, turns into a deeper tone of the accent that stays readable on white (4.6:1).
 */
.header-menu .header-menu__list .header-menu__item,
.site-menu .submenu > li > a {
    position: relative;
    transition: color 0.25s ease, padding-left 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.site-menu .submenu > li > a {
    color: #666;
}

.header-menu .header-menu__list .header-menu__item::before,
.site-menu .submenu > li > a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 18px;
    margin-top: -9px;
    border-radius: 0 2px 2px 0;
    background-color: #dcb14a;
    transform: scaleY(0);
    transition: transform 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.header-menu .header-menu__list .header-menu__item:hover,
.header-menu .header-menu__list .header-menu__item:focus-visible,
.header-menu .header-menu__list .header-menu__item[aria-current="true"],
.site-menu .submenu > li > a:hover,
.site-menu .submenu > li > a:focus-visible {
    background-color: transparent;
    color: #916f1c;
}

.header-menu .header-menu__list .header-menu__item:hover,
.header-menu .header-menu__list .header-menu__item:focus-visible {
    padding-left: 24px;
}

.site-menu .submenu > li > a:hover,
.site-menu .submenu > li > a:focus-visible {
    padding-left: 34px;
}

.header-menu .header-menu__list .header-menu__item:hover::before,
.header-menu .header-menu__list .header-menu__item:focus-visible::before,
.header-menu .header-menu__list .header-menu__item[aria-current="true"]::before,
.site-menu .submenu > li > a:hover::before,
.site-menu .submenu > li > a:focus-visible::before {
    transform: scaleY(1);
}

.header-menu .header-menu__list .header-menu__item:focus-visible,
.site-menu .submenu > li > a:focus-visible {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .header-menu .header-menu__list .header-menu__item,
    .header-menu .header-menu__list .header-menu__item::before,
    .site-menu .submenu > li > a,
    .site-menu .submenu > li > a::before {
        transition: none;
    }
}

.header-menu__code {
    min-width: 22px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* A one-off confirmation carried over a redirect ("Your details have been saved.") --------------- */

/* Messages: one stack of toasts in the bottom right corner of every page. It lies above the window of the
   control panel, so a message about the form in that window is not hidden behind it. */

.toast-stack {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(440px, calc(100vw - 40px));
    pointer-events: none;
}

/* While that window is open the stack sits above its bar of buttons, so the button that saves stays free. */
.modal-open .toast-stack {
    bottom: 120px;
}

.site-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #cfe3d1;
    border-left: 4px solid #2e7d32;
    background-color: #f2f9f3;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    color: #222;
    text-align: left;
    pointer-events: auto;
    animation: site-toast-in 0.25s ease-out;
}

.site-toast--error {
    border-color: #f0cfd2;
    border-left-color: #b3261e;
    background-color: #fdf1f2;
}

.site-toast__text {
    flex: 1 1 auto;
}

.site-toast__close {
    flex: 0 0 auto;
    padding: 0 2px;
    border: 0;
    background: none;
    color: #666;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.site-toast__close:hover,
.site-toast__close:focus-visible {
    color: #222;
}

.site-toast.is-leaving {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.25s, transform 0.25s;
}

@keyframes site-toast-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-toast {
        animation: none;
    }

    .site-toast.is-leaving {
        transition: none;
    }
}

/* Sign-in box: every field carries its label above it ---------------------------------------------- */

.account-form-box .single-input label {
    display: block;
    margin-bottom: 6px;
    color: #000;
    font-size: 14px;
    font-weight: 500;
}

/* Placeholders ------------------------------------------------------------------------------------ */

/* The theme hides the placeholder of an input in a form while it has the focus (form input:focus::placeholder). A
   placeholder often says what to type - the form of a code, an IBAN, a size - so it stays until something is typed,
   in the colour the browser gives it, on every form of the site and of the panel. */
form input:focus::placeholder {
    color: revert;
}

/* Validation -------------------------------------------------------------------------------------- */

.field-error {
    display: block;
    margin-top: 6px;
    color: #b02a37;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
}

.field-error:empty,
.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border-color: #dc3545 !important;
}

.field-hint {
    display: block;
    margin-top: 6px;
    color: #777;
    font-size: 13px;
    line-height: 1.4;
}

/*
 * Inside the sign-in box the theme turns every span into a checkbox label (padding, pointer and a tick
 * icon). The messages and hints placed there are spans too and must stay plain text.
 */
.myaccount-box-wrapper .content-modal-box span.field-error,
.myaccount-box-wrapper .content-modal-box span.field-hint {
    display: block;
    padding: 0;
    cursor: default;
    line-height: 1.4;
}

.myaccount-box-wrapper .content-modal-box span.field-error::before,
.myaccount-box-wrapper .content-modal-box span.field-hint::before {
    content: none;
}

.myaccount-box-wrapper .content-modal-box span.field-error:empty,
.myaccount-box-wrapper .content-modal-box span.field-validation-valid {
    display: none;
}

/* The same goes for the parts of a checkbox and a switch (see "Shared form controls" below). */
.myaccount-box-wrapper .content-modal-box .switch-field span {
    padding: 0;
    line-height: 1.4;
}

.myaccount-box-wrapper .content-modal-box .switch-field span::before {
    content: none;
}

/* Sign-in box: text under and above the form ---------------------------------------------------- */

.account-form-box .form-intro {
    margin: 10px 0 0;
    color: #666;
    line-height: 1.6;
}

.account-form-box .form-after {
    margin: 20px 0 0;
    font-size: 14px;
    text-align: center;
}

.account-form-box .form-after a {
    color: #000;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.account-form-box .form-after a:hover,
.account-form-box .form-after a:focus-visible {
    color: #dcb14a;
}

/* Password field with its show/hide button ---------------------------------------------------------- */

.password-field {
    position: relative;
}

/* Room for the button; the selector has to outweigh the theme's own padding rule for these inputs. */
.myaccount-box-wrapper .content-modal-box .account-form-box .single-input .password-field input {
    padding-right: 48px;
}

.myaccount-content .password-field input {
    padding-right: 48px;
}

.myaccount-content .password-field--copyable input {
    padding-right: 92px;
}

.password-field__toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    padding: 0;
    border: 0;
    background: none;
    color: #666;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.password-field__toggle[hidden] {
    display: none;
}

.password-field__toggle:hover,
.password-field__toggle:focus-visible,
.password-field__toggle[aria-pressed="true"] {
    color: #000;
}

.password-field__copy {
    position: absolute;
    top: 0;
    right: 46px;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    padding: 0;
    border: 0;
    background: none;
    color: #666;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.password-field__copy[hidden] {
    display: none;
}

.password-field__copy:hover,
.password-field__copy:focus-visible {
    color: #000;
}

.password-generator__trigger {
    padding: 0;
    border: 0;
    background: none;
    color: #222;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.password-generator__trigger:hover,
.password-generator__trigger:focus-visible {
    color: #dcb14a;
}

.account-form-box button.btn {
    cursor: pointer;
}

/* Shared form controls ---------------------------------------------------------------------------- */

/*
 * The selection list, the date and time field, the checkbox and the switch of the site. Each is rendered by a
 * tag helper of its own (select-field, datetime-field and switch-field, in the TagHelpers
 * folder), so no view draws one itself and they look alike wherever they stand. The real form element stays
 * in the page for the post, the keyboard and screen readers; what is seen is drawn here.
 */

/* Selection list: a select in the look of a text field. Once the script has run, a button stands in its place
   and opens a list drawn by the site (site.js). */

.select-field,
.datetime-field {
    position: relative;
    display: block;
    width: 100%;
}

/* The select and the button look the same while the list is closed, and the button of a date and time field
   looks like them. The selectors name the elements so these rules outweigh the theme's own for a select and
   a button. */
select.select-field__native,
button.select-field__button,
button.datetime-field__button {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 12px 40px 12px 10px;
    border: 1px solid #ddd;
    border-radius: 0;
    background: #fff;
    color: #222;
    font-size: 14px;
    line-height: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* The theme greys a list while it has the focus and insists on it. */
select.select-field__native:focus {
    background: #fff !important;
}

/* Like a text field, the list shows the focus by its border, however the focus came to it. */
select.select-field__native:focus,
button.select-field__button:focus,
button.datetime-field__button:focus,
.select-field.is-open button.select-field__button,
.datetime-field.is-open button.datetime-field__button {
    border-color: #dcb14a;
    outline: 0;
}

select.select-field__native.input-validation-error,
select.input-validation-error ~ button.select-field__button,
input.input-validation-error ~ button.datetime-field__button {
    border-color: #dc3545;
}

select.select-field__native:disabled,
button.select-field__button:disabled,
button.datetime-field__button:disabled {
    background-color: #f4f5f7;
    color: #777;
    cursor: default;
}

/* The arrow at the right edge; it turns while the list is open. */
.select-field::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 1.5px solid #222;
    border-bottom: 1.5px solid #222;
    pointer-events: none;
    transform: rotate(45deg);
    transition: transform 0.2s, margin-top 0.2s;
}

.select-field.is-open::after {
    margin-top: -2px;
    transform: rotate(225deg);
}

/* Behind the button the select stays where it is, unseen: it still takes the focus a label sends it and
   hands it on to the button. The input of a date and time field does the same. */
.select-field.is-enhanced .select-field__native,
.datetime-field.is-enhanced .datetime-field__native {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.select-field__value,
.datetime-field__value {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: none;
}

/* An option without a text keeps the height of the button. */
.select-field__value:empty::before {
    content: "\00a0";
}

/* The choice that stands for "nothing chosen" (an option with an empty value) is toned down, and so is the
   invitation an empty date and time field shows. */
.select-field__button.is-empty .select-field__value,
.datetime-field__button.is-empty .datetime-field__value {
    color: #777;
}

/* The open list is placed by the script and lies above the window of the control panel (1055), below the
   toasts. */
.select-field__list {
    position: fixed;
    z-index: 1070;
    margin: 0;
    padding: 6px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid #e5e5e5;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    color: #222;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    animation: field-panel-in 0.12s ease-out;
}

.select-field__list[hidden] {
    display: none;
}

/* A long list stands in a panel with its search box above it: the panel is placed and framed, the list scrolls
   inside it. The panel lies at the end of the page while it is open, so the field styles of a form do not reach the
   box; it has its own. */
.select-field__panel {
    position: fixed;
    z-index: 1070;
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e5e5;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    color: #222;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    animation: field-panel-in 0.12s ease-out;
}

.select-field__panel[hidden],
.select-field__no-match[hidden],
.select-field__option[hidden],
.select-field__group[hidden] {
    display: none;
}

.select-field__panel .select-field__list {
    position: static;
    border: 0;
    box-shadow: none;
    animation: none;
}

.select-field__search {
    padding: 8px;
    border-bottom: 1px solid #eee;
}

.select-field__panel .select-field__search-input {
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 0;
    background-color: #fff;
    color: #222;
    font-size: 14px;
    line-height: 1.4;
}

.select-field__panel .select-field__search-input:focus {
    border-color: #dcb14a;
    color: #222;
    outline: 0;
}

/* Said when the search leaves no option */
.select-field__no-match {
    padding: 12px 14px;
    color: #777;
}

.select-field__option {
    position: relative;
    padding: 10px 40px 10px 14px;
    overflow-wrap: anywhere;
    cursor: pointer;
}

/* The option under the pointer or reached with the arrow keys */
.select-field__option.is-active {
    background-color: #f6f1e3;
}

/* The option that is chosen carries a tick. */
.select-field__option[aria-selected="true"] {
    font-weight: 500;
}

.select-field__option[aria-selected="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 17px;
    width: 6px;
    height: 11px;
    margin-top: -7px;
    border: solid #a67c1e;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.select-field__option[aria-disabled="true"] {
    color: #aaa;
    cursor: default;
}

/* The heading of a group of options (optgroup) and the options under it */
.select-field__group-label {
    padding: 10px 14px 4px;
    color: #777;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.select-field__group .select-field__option {
    padding-left: 26px;
}

@keyframes field-panel-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Date and time field: an input in the look of a text field. Once the script has run, a button stands in its
   place and opens a calendar with a column each for the hour and the minute (site.js). What is chosen is
   marked in the accent colour of the site, today by a frame in it. */

input.datetime-field__native {
    display: block;
    width: 100%;
    padding: 12px 10px;
    border: 1px solid #ddd;
    border-radius: 0;
    background-color: #fff;
    color: #222;
    font-size: 14px;
    line-height: inherit;
    accent-color: #dcb14a;
}

input.datetime-field__native:focus {
    border-color: #dcb14a;
}

.datetime-field__icon {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    pointer-events: none;
}

/* The open panel is placed by the script and lies where the list of a selection list does. */
.datetime-field__panel {
    position: fixed;
    z-index: 1070;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    border: 1px solid #e5e5e5;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    color: #222;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    outline: 0;
    animation: field-panel-in 0.12s ease-out;
}

.datetime-field__panel[hidden] {
    display: none;
}

/* Every part that can be pressed is a button; the theme's own look and slow transition of a button give way. */
.datetime-field__panel button {
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.datetime-field__body {
    display: flex;
}

.datetime-field__calendar {
    padding: 20px 24px 24px;
}

/* The month on display and the two arrows that turn to its neighbours */
.datetime-field__header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
}

.datetime-field__panel .datetime-field__title {
    margin: 0 auto 0 -8px;
    padding: 6px 8px;
    font-size: 16px;
    font-weight: 500;
}

/* A small arrow after the title says that it opens something: the months of the year. */
.datetime-field__title::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 2px 3px 10px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s;
}

.datetime-field__title[aria-expanded="true"]::after {
    margin-bottom: 0;
    transform: rotate(225deg);
}

.datetime-field__step {
    position: relative;
    width: 36px;
    height: 36px;
}

.datetime-field__step::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -2px;
    border-bottom: 1.5px solid currentColor;
    border-left: 1.5px solid currentColor;
    transform: rotate(45deg);
}

.datetime-field__step--next::before {
    margin-left: -6px;
    transform: rotate(225deg);
}

.datetime-field__weekdays,
.datetime-field__days {
    display: grid;
    grid-template-columns: repeat(7, 40px);
    gap: 6px;
}

.datetime-field__weekdays {
    margin-bottom: 6px;
    color: #777;
    font-size: 12px;
    letter-spacing: 0.04em;
    line-height: 28px;
    text-align: center;
    text-transform: uppercase;
}

.datetime-field__weekdays[hidden] {
    display: none;
}

.datetime-field__day,
.datetime-field__time {
    height: 40px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* The days of the neighbouring months that fill the first and the last week */
.datetime-field__panel .datetime-field__day.is-outside {
    color: #aaa;
}

/* The months of a year take the place of the weekdays and the days and fill it. */
.datetime-field__days.is-months {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    width: 316px;
    height: 304px;
}

.datetime-field__month {
    text-transform: capitalize;
}

.datetime-field__panel .datetime-field__title:hover,
.datetime-field__panel .datetime-field__step:hover,
.datetime-field__panel .datetime-field__day:hover,
.datetime-field__panel .datetime-field__month:hover,
.datetime-field__panel .datetime-field__time:hover {
    background-color: #f6f1e3;
}

.datetime-field__panel .is-today {
    border-color: #dcb14a;
}

.datetime-field__panel [aria-pressed="true"],
.datetime-field__panel [aria-pressed="true"]:hover,
.datetime-field__panel .datetime-field__day.is-outside[aria-pressed="true"] {
    border-color: #dcb14a;
    background-color: #dcb14a;
    color: #222;
    font-weight: 500;
}

/* The columns of the hour and the minute are as tall as the calendar beside them and scroll inside it. */
.datetime-field__times {
    display: flex;
    gap: 8px;
    padding: 20px 20px 24px;
    border-left: 1px solid #eee;
}

.datetime-field__column {
    display: flex;
    flex-direction: column;
    width: 56px;
}

.datetime-field__unit {
    min-height: 36px;
    margin-bottom: 14px;
    color: #777;
    font-size: 12px;
    letter-spacing: 0.04em;
    line-height: 36px;
    text-align: center;
    text-transform: uppercase;
}

.datetime-field__track {
    position: relative;
    flex: 1 1 auto;
}

.datetime-field__scroll {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.datetime-field__scroll::-webkit-scrollbar {
    display: none;
}

.datetime-field__panel .datetime-field__time {
    display: block;
    width: 100%;
    margin-bottom: 6px;
}

.datetime-field__panel .datetime-field__time:last-child {
    margin-bottom: 0;
}

/* Below the calendar: empty the field, go to today, and the button that closes the panel */
.datetime-field__footer {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 24px;
    border-top: 1px solid #eee;
}

.datetime-field__panel .datetime-field__link {
    padding: 6px 0;
    color: #666;
}

.datetime-field__panel .datetime-field__link:hover {
    color: #222;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.datetime-field__panel .datetime-field__done {
    margin-left: auto;
    padding: 8px 24px;
    border-color: #222;
    background-color: #222;
    color: #fff;
    font-weight: 500;
}

.datetime-field__panel .datetime-field__done:hover {
    border-color: #dcb14a;
    background-color: #dcb14a;
}

/* In a narrow window the columns stand under the calendar. */
@media (max-width: 575px) {
    .datetime-field__body {
        flex-direction: column;
    }

    .datetime-field__calendar {
        padding: 16px;
    }

    .datetime-field__weekdays,
    .datetime-field__days {
        grid-template-columns: repeat(7, minmax(0, 40px));
        justify-content: center;
    }

    .datetime-field__days.is-months {
        width: auto;
    }

    .datetime-field__times {
        justify-content: center;
        height: 220px;
        padding: 12px 16px 16px;
        border-top: 1px solid #eee;
        border-left: 0;
    }

    .datetime-field__unit {
        margin-bottom: 6px;
    }

    .datetime-field__footer {
        padding: 12px 16px;
    }
}

/* A time field has the columns only: they get the height the calendar would give them, and no line beside or above. */
.datetime-field__panel--time .datetime-field__times {
    height: 300px;
    border-top: 0;
    border-left: 0;
}

/* Checkbox and switch: a label with the real checkbox, the mark drawn in its place and the text */

/* The theme gives every label a margin below; the spacing classes of a view (mt-10, mb-3) stay in force. */
.switch-field {
    position: relative;
    display: inline-flex;
    gap: 10px;
    margin-bottom: 0;
    cursor: pointer;
}

.switch-field {
    align-items: center;
}

/* The real checkbox keeps its place in the page, unseen. The selectors name the elements so these rules
   outweigh the ones the theme has for the inputs of its forms. */
label.switch-field input.switch-field__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.switch-field__track {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    border-radius: 12px;
    background-color: #bbb;
    transition: background-color 0.2s;
}

.switch-field__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #fff;
    transition: transform 0.2s;
}

.switch-field__input:checked + .switch-field__track {
    background-color: #222;
}

.switch-field__input:checked + .switch-field__track::after {
    transform: translateX(18px);
}

.switch-field__input:focus-visible + .switch-field__track {
    outline: 2px solid #dcb14a;
    outline-offset: 2px;
}

.switch-field__input:disabled ~ span {
    opacity: 0.5;
    cursor: default;
}

/* The checkbox: a box that is ticked when it is checked, and filled with a line while a "select all" stands for
   only some of its rows (indeterminate). */
.checkbox-field {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    cursor: pointer;
}

label.checkbox-field input.checkbox-field__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.checkbox-field__box {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 1px solid #999;
    border-radius: 4px;
    background-color: #fff;
    transition: background-color 0.2s, border-color 0.2s;
}

.checkbox-field__input:checked + .checkbox-field__box,
.checkbox-field__input:indeterminate + .checkbox-field__box {
    border-color: #222;
    background-color: #222;
}

.checkbox-field__input:checked + .checkbox-field__box::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 6px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-field__input:indeterminate + .checkbox-field__box::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 4px;
    width: 10px;
    height: 2px;
    background-color: #fff;
}

.checkbox-field__input:focus-visible + .checkbox-field__box {
    outline: 2px solid #dcb14a;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .select-field::after,
.switch-field__track,
.switch-field__track::after,
.checkbox-field__box {
        transition: none;
    }

    .select-field__list,
    .select-field__panel,
    .datetime-field__panel {
        animation: none;
    }

    .datetime-field__panel button,
    .datetime-field__title::after {
        transition: none;
    }
}

/* Footer: the working hours ------------------------------------------------------------------------- */

/* The days on the left, their hours on the right; the block keeps to the side of its column on wider screens. */
.footer-hours {
    display: inline-block;
    min-width: 220px;
    max-width: 100%;
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
}

.footer-hours__title,
.footer-hours__subtitle {
    margin: 0 0 6px;
    color: #222;
    font-size: 15px;
    font-weight: 600;
}

.footer-hours__subtitle {
    margin-top: 12px;
    font-size: 14px;
}

/* Whether the company is open at this moment: written by the script of the site, by the clock of the visitor. */
.footer-hours__status {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
}

/* The clock keeps its own colour, whichever the answer is. */
.footer-hours__status i {
    margin-right: 6px;
    color: #cd995c;
    font-size: 16px;
    vertical-align: -2px;
}

.footer-hours__status.is-open {
    color: #1a7f37;
}

.footer-hours__status.is-closed {
    color: #b42318;
}

.footer-hours__list {
    margin: 0;
}

.footer-hours__row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.footer-hours__row dt {
    color: #777;
    font-weight: 400;
}

.footer-hours__row dd {
    margin: 0;
    color: #222;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
}

/*
 * Signing out is a form post, not a link, so the last entry of the account menu is a button made to
 * look like the links above it.
 */
.myaccount-tab-menu form {
    margin: 0;
}

.myaccount-tab-menu a {
    text-transform: none;
}

.myaccount-tab-menu button {
    display: block;
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    background: transparent;
    color: #222;
    font-weight: 500;
    text-align: left;
    text-transform: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.myaccount-tab-menu button:hover,
.myaccount-tab-menu button:focus-visible {
    background-color: #dcb14a;
    border-color: #dcb14a;
    color: #fff;
}

.myaccount-tab-menu a i,
.myaccount-tab-menu button i {
    display: inline-block;
    width: 25px;
    text-align: center;
}

/* The theme pulls a form up by 20px to meet its heading; the second form on the page has no heading. */
.myaccount-content form + form {
    margin-top: 0;
}

.myaccount-content form .single-input-item input[readonly] {
    background-color: #f4f5f7;
    color: #777;
}

.myaccount-content .welcome .link-button {
    padding: 0;
    border: 0;
    background: none;
    color: #222;
    font: inherit;
    cursor: pointer;
}

.myaccount-content .welcome .link-button:hover {
    color: #dcb14a;
}

.myaccount-content .welcome form {
    display: inline;
    margin: 0;
}

/* Keyboard focus, which the theme leaves to the browser default in some places and removes in others */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid #dcb14a;
    outline-offset: 2px;
}

/* Header menu: the theme sizes its navigation for a full-width header row; here it shares the row with the logo */

.site-menu > ul {
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-menu > ul > li {
    margin: 0 24px 0 0;
}

.site-menu > ul > li > a {
    padding: 12px 2px;
}

.site-menu .submenu {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);
    min-width: 220px;
    margin: 0;
    padding: 12px 0;
    list-style: none;
    z-index: 20;
}

/* The theme opens a submenu on hover only; the keyboard needs it as well */

.site-menu > ul > li.has-children:focus-within > .submenu {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
}

/* A menu heading without a link, in the panel of small screens */

.offcanvas-navigation__heading {
    display: block;
    padding-top: 18px;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}

/* Content pages: the theme resets the spacing of the elements an editor produces */

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4 {
    margin: 1.4em 0 0.6em;
}

.page-content p,
.page-content ul,
.page-content ol,
.page-content table {
    margin-bottom: 1em;
}

.page-content ul,
.page-content ol {
    padding-left: 1.4em;
}

.page-content ul {
    list-style: disc;
}

.page-content ol {
    list-style: decimal;
}

.page-content img {
    max-width: 100%;
    height: auto;
}

.page-content a {
    text-decoration: underline;
}

/* Control panel: the account page's frame with forms, tables and lists of its own */

.cp-content form {
    margin-top: 0;
}

.cp-content .title {
    margin-bottom: 20px;
}

.cp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.cp-toolbar .title {
    margin-bottom: 0;
}

.cp-subtitle {
    margin: 40px 0 10px;
}

/* Tabs: a row of plain labels on one line; the open tab is the one that is underlined */

.cp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 28px;
    margin-bottom: 24px;
    border-bottom: 1px solid #ddd;
}

.cp-tabs a {
    margin-bottom: -1px;
    padding: 10px 0;
    border-bottom: 2px solid transparent;
    color: #666;
    font-weight: 500;
}

.cp-tabs a:hover,
.cp-tabs a:focus-visible {
    color: #222;
}

.cp-tabs a.active,
.cp-tabs a[aria-current="page"] {
    border-bottom-color: #222;
    color: #222;
}

/* A tab of a form that holds a refused field */
.cp-tabs a.has-error,
.cp-tabs a.has-error.active {
    color: #b3261e;
}

.cp-tabs a.has-error.active {
    border-bottom-color: #b3261e;
}

.cp-tabs a.has-error::after {
    content: " !";
    font-weight: 700;
}

.cp-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 20px;
}

.cp-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #ddd;
    color: #222;
}

.cp-pagination a:hover,
.cp-pagination a:focus-visible,
.cp-pagination a.active {
    border-color: #dcb14a;
    background-color: #dcb14a;
    color: #fff;
}

.cp-link-button {
    padding: 0;
    border: 0;
    background: none;
    color: #222;
    text-decoration: underline;
}

.cp-link-button:hover {
    color: #b3261e;
}

/* Working hours (the settings of the panel): the rows of hours of the chosen grouping and the closed periods. A row
   is a box with its name on the left and its fields on the right; in a narrow window the fields go under the name. */
.working-hours__group,
.working-hours__period {
    display: grid;
    gap: 12px 16px;
    align-items: end;
    margin-bottom: 12px;
    padding: 16px;
    border: 1px solid #e5e5e5;
    background-color: #fff;
}

.working-hours__group {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto;
}

.working-hours__period {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto;
}

.working-hours__group[hidden],
.working-hours__period[hidden],
.working-hours__empty[hidden] {
    display: none;
}

.working-hours__name {
    align-self: center;
}

.working-hours__name strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
}

/* The labels of a row are those of every other field of the panel. */
.working-hours__field label,
.working-hours__closed > label {
    display: block;
    margin-bottom: 4px;
}

/* The switch of a closed day and the remove button stand at the height of the fields beside them. */
.working-hours__switch,
.working-hours__remove {
    min-height: 46px;
}

.working-hours__switch {
    display: flex;
    align-items: center;
}

/* A closed day has no hours: its fields are greyed out. */
.working-hours__group.is-closed .working-hours__field {
    opacity: 0.45;
}

.working-hours__mode {
    max-width: 320px;
    margin-bottom: 16px;
}

.working-hours__add {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 18px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #222;
    cursor: pointer;
}

.working-hours__add:hover,
.working-hours__add:focus-visible {
    border-color: #222;
}

.working-hours__remove {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border: 1px solid #f0c4c1;
    background-color: #fff;
    color: #b3261e;
    cursor: pointer;
}

.working-hours__remove:hover,
.working-hours__remove:focus-visible {
    border-color: #b3261e;
}

.working-hours__empty {
    padding: 20px;
    border: 1px dashed #ddd;
    color: #777;
}

/* The rows follow the width of their group, not of the window: in a narrow group the name (or the title of a closed
   period) takes a line of its own and the fields stand two by two below it. */
.working-hours__rows {
    container-type: inline-size;
}

@container (max-width: 640px) {
    .working-hours__group,
    .working-hours__period {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .working-hours__name,
    .working-hours__period > .working-hours__field:first-child {
        grid-column: 1 / -1;
    }
}

/* The actions of a row of a list: an icon each. The name of the action is the tooltip and what a screen reader says. */
.cp-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    background-color: #fff;
    color: #222;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.cp-icon-button:hover,
.cp-icon-button:focus-visible {
    border-color: #dcb14a;
    color: #7a5c0f;
}

.cp-icon-button--danger:hover,
.cp-icon-button--danger:focus-visible {
    border-color: #b3261e;
    color: #b3261e;
}

/* The theme styles text inputs of the account page only; the panel's forms have text areas as well. Lists,
   checkboxes and switches are the shared form controls. */

.cp-form .single-input-item textarea {
    width: 100%;
    padding: 12px 10px;
    border: 1px solid #ddd;
    background-color: #fff;
    font-family: Consolas, "Courier New", monospace;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
}

.cp-form .single-input-item textarea:focus {
    border-color: #dcb14a;
}

.cp-form label.required::after {
    content: " *";
    color: #b3261e;
}

.cp-form fieldset {
    margin: 30px 0 10px;
}

.cp-form legend {
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 500;
}

/* The first group of a tab starts right under the tabs, whose margin is the space between them; the groups after it
   keep theirs. */
.cp-form .tab-pane > fieldset:first-child,
.cp-form .tab-pane > div:first-child > fieldset:first-child,
.cp-form .tab-pane > fieldset:first-child > legend,
.cp-form .tab-pane > div:first-child > fieldset:first-child > legend {
    margin-top: 0;
}

/* A sentence under the heading of a group of fields that says what the group is for */
.cp-form .cp-fieldset-hint {
    margin: -4px 0 16px;
}

/* Room for the button that shows what was typed into a secret field */
.cp-form .single-input-item .password-field input {
    padding-right: 48px;
}

/* The page assistant: the box in the page form from which Gemini is asked to write or to translate the texts of
   a tab. What it does stands on the left or on top, the button that asks at the right edge; while Gemini is at
   work the button says so and cannot be pressed again. */

.cp-assistant {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 24px;
    padding: 16px 20px;
    border: 1px solid #eadfbf;
    border-left: 4px solid #dcb14a;
    background-color: #fbf8ef;
}

.cp-assistant--inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.cp-assistant__text strong,
.cp-assistant__text .field-hint {
    display: block;
}

.cp-assistant__text strong {
    font-weight: 500;
}

.cp-assistant__text .field-hint {
    margin-top: 2px;
}

.cp-assistant__text a {
    color: #222;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cp-assistant__row {
    display: flex;
    gap: 12px;
}

.cp-assistant__row input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 10px;
    border: 1px solid #ddd;
    background-color: #fff;
    font-size: 14px;
}

.cp-assistant .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.cp-assistant .btn:disabled {
    opacity: 0.75;
    cursor: progress;
}

/* A small ring turns in front of the text of the button while the answer is awaited. */
.cp-assistant .btn.is-busy::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 10px -2px 0;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cp-assistant-turn 0.8s linear infinite;
}

@keyframes cp-assistant-turn {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 767px) {
    .cp-assistant--inline,
    .cp-assistant__row {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-assistant .btn.is-busy::before {
        animation: none;
    }
}

/* An on/off of a form that stands on a line of its own (the "Active" of a tab, of a page or of a menu item): every
   on/off of the site is a switch; the site has no checkboxes. */
.cp-form .cp-toggle {
    display: flex;
    width: fit-content;
    margin-bottom: 20px;
}

/* The "Closed" of a row of working hours sits in the row. */
.working-hours__closed .switch-field {
    margin: 0;
}

/* The editor of a content field (CKEditor 5) */

.cp-form .ck-editor__editable_inline {
    min-height: 320px;
    max-height: 60vh;
}

/* The theme strips lists of their markers everywhere; in written content, in the editor and on the site, a list
   looks like one. */
.ck-content ul,
.ck-content ol {
    margin: 0 0 1em;
    padding-left: 1.6em;
}

.ck-content ul {
    list-style: disc;
}

.ck-content ol {
    list-style: decimal;
}

/* The editor puts its balloons and dropdowns at the end of the page; they have to lie above the window of the
   control panel (1055) and stay below the toasts. */
body {
    --ck-z-panel: 1080;
}

/* The way back from a form that is a page of its own */

.cp-back {
    margin-bottom: 16px;
}

.cp-back a {
    color: #666;
}

.cp-back a:hover,
.cp-back a:focus-visible {
    color: #222;
    text-decoration: underline;
}

/* One row of the settings page, a switch laid out the other way round: what the setting does on the left, the
   switch at the right edge */

.switch-field.cp-setting {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid #eee;
}

.cp-setting strong,
.cp-setting .field-hint {
    display: block;
}

.cp-setting strong {
    font-weight: 500;
}

/* The window of the add and edit forms */

.cp-modal .modal-header {
    padding: 16px 24px;
}

.cp-modal .modal-title {
    margin: 0;
}

/* The body borrows the field styles of the panel's content area, not its frame. */
.cp-modal .modal-body {
    padding: 24px;
    border: 0;
}

/* The button that saves stays in sight while a long form scrolls */
.cp-modal .cp-form__actions {
    position: sticky;
    bottom: -24px;
    margin: 10px -24px -24px;
    padding: 14px 24px;
    border-top: 1px solid #eee;
    background-color: #fff;
}

/* Form buttons sit at the right edge, the action that saves last */

.cp-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px 24px;
    margin-top: 10px;
}

/* User avatar controls share the control panel buttons and spacing. */
.user-avatar { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.user-avatar__preview { border-radius: 50%; object-fit: cover; }
.user-avatar__preview[hidden] { display: none; }
.user-avatar [data-avatar-filename] { overflow-wrap: anywhere; max-width: 100%; }

.user-avatar-lightbox__image { max-width: 100%; max-height: 75vh; object-fit: contain; }

/* Control panel: the hero ------------------------------------------------------------------------------------- */

/* A row of the slide list: the picture, then the title. */
.cp-hero-slide {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 240px;
}

.cp-hero-slide__picture {
    flex: 0 0 96px;
    width: 96px;
    height: 54px;
    object-fit: cover;
    background-color: #f1f1f1;
}

.cp-hero-slide__title {
    white-space: normal;
}

.cp-hero-period {
    white-space: nowrap;
}

/* The arrows of a row: the first slide does not go up, the last not down. */
.cp-icon-button:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* The picture an address field holds, under the field. */
.media-url-preview {
    display: block;
    max-width: 320px;
    max-height: 180px;
    margin-top: 8px;
    border: 1px solid #eee;
    object-fit: cover;
}

.media-url-preview[hidden] {
    display: none;
}

/* Home page: the hero ------------------------------------------------------------------------------------------ */

.hero {
    position: relative;
    overflow: hidden;
    background-color: #111;
}

/* The heights: the whole window below the header (90 pixels), or a large or medium band. */
.hero--full {
    height: calc(100vh - 90px);
    min-height: 480px;
}

.hero--large {
    height: 640px;
}

.hero--medium {
    height: 460px;
}

@media (max-width: 991px) {
    .hero--large {
        height: 520px;
    }

    .hero--medium {
        height: 400px;
    }
}

@media (max-width: 767px) {
    .hero--full,
    .hero--large {
        height: 480px;
        min-height: 0;
    }

    .hero--medium {
        height: 360px;
    }
}

/* "Slide": the slides stand side by side and the track moves. "Fade": they lie over one another. */
.hero__track {
    display: flex;
    height: 100%;
    transition: transform 0.6s ease;
}

.hero__slide {
    position: relative;
    display: flex;
    flex: 0 0 100%;
    align-items: center;
    height: 100%;
}

.hero--fade .hero__track {
    position: relative;
    display: block;
    transition: none;
}

.hero--fade .hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.hero--fade .hero__slide.is-active {
    opacity: 1;
    visibility: visible;
}

.hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The layer that darkens the picture, so the texts on it can be read. */
.hero__overlay {
    position: absolute;
    inset: 0;
    background-color: #000;
    opacity: 0;
}

.hero__overlay--10 { opacity: 0.1; }
.hero__overlay--20 { opacity: 0.2; }
.hero__overlay--30 { opacity: 0.3; }
.hero__overlay--40 { opacity: 0.4; }
.hero__overlay--50 { opacity: 0.5; }
.hero__overlay--60 { opacity: 0.6; }
.hero__overlay--70 { opacity: 0.7; }
.hero__overlay--80 { opacity: 0.8; }

.hero__content {
    position: relative;
    z-index: 1;
}

.hero__text {
    max-width: 860px;
    padding: 0 56px;
}

.hero__slide--center .hero__text {
    margin: 0 auto;
    text-align: center;
}

.hero__slide--right .hero__text {
    margin-left: auto;
    text-align: right;
}

/* Hero typography; the home page loads the regular and bold font weights. */
.hero__title,
.hero__subtitle {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    opacity: 0.9;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
    overflow-wrap: anywhere;
}

.hero__title {
    margin-bottom: 22px;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.hero__subtitle {
    margin-bottom: 28px;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.02em;
    white-space: pre-line;
    text-wrap: pretty;
}

@media (max-width: 991px) {
    .hero__title {
        font-size: 60px;
    }

    .hero__subtitle {
        font-size: 36px;
    }
}

@media (max-width: 767px) {
    .hero__text {
        padding: 0 24px;
    }

    .hero__title {
        margin-bottom: 16px;
        font-size: clamp(36px, 9vw, 44px);
    }

    .hero__subtitle {
        font-size: clamp(24px, 6vw, 28px);
    }
}

/* Light texts on a dark picture, dark texts on a light one. */
.hero__slide--light .hero__title,
.hero__slide--light .hero__subtitle {
    color: #fff;
}

.hero__slide--dark .hero__title,
.hero__slide--dark .hero__subtitle {
    color: #111;
}

.hero__slide--light .hero__button {
    background-color: #fff;
    color: #111;
}

.hero__slide--dark .hero__button {
    background-color: #111;
    color: #fff;
}

.hero__slide .hero__button:hover,
.hero__slide .hero__button:focus-visible {
    background-color: #dcb14a;
    color: #fff;
}

/* The arrows at the sides and, at the bottom, the pause button and a dot for every slide. */
.hero__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.85);
    color: #111;
    font-size: 18px;
    line-height: 44px;
    text-align: center;
    transform: translateY(-50%);
}

.hero__arrow--previous {
    left: 16px;
}

.hero__arrow--next {
    right: 16px;
}

.hero__controls {
    position: absolute;
    right: 0;
    bottom: 20px;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.hero__dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.55);
}

.hero__dot.is-active {
    background-color: #dcb14a;
}

.hero__pause {
    padding: 0 4px;
    border: 0;
    background: none;
    color: #fff;
    font-size: 20px;
    line-height: 1;
}

.hero__arrow:hover,
.hero__arrow:focus-visible,
.hero__pause:hover,
.hero__pause:focus-visible,
.hero__dot:hover,
.hero__dot:focus-visible {
    opacity: 0.85;
}

.hero__arrow:focus-visible,
.hero__pause:focus-visible,
.hero__dot:focus-visible,
.hero__button:focus-visible {
    outline: 2px solid #dcb14a !important;
    outline-offset: 2px;
}

@media (max-width: 575px) {
    .hero__arrow {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__track,
.hero--fade .hero__slide {
        transition: none;
    }
}

/* Forms: a part that waits for a choice of another field (data-show-when) is out of the way while hidden. */
[data-show-when][hidden] {
    display: none !important;
}

/* An address field with two buttons: the upload and the library. */
.media-url-field {
    flex-wrap: wrap;
}

video.media-url-preview {
    background-color: #111;
}

/* Control panel: the shared texts of the hero, and the marks of a row of its list */
.cp-hero-shared__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.cp-hero-slide__media {
    position: relative;
    flex: 0 0 96px;
}

.cp-hero-slide__badge {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 2px 4px;
    background-color: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 12px;
    line-height: 1;
}

.cp-hero-slide__shared {
    color: #777;
    font-style: italic;
}

/* Home page: the video of a slide covers it as a picture does; the shared texts stand above the slides. */
video.hero__image {
    background-color: #111;
}

.hero__shared {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.hero.is-shared .hero__shared {
    opacity: 1;
    visibility: visible;
}

/* Only the texts take a press; the rest of the layer lets it through to the slide. */
.hero.is-shared .hero__shared .hero__text {
    pointer-events: auto;
}

.hero__shared .hero__content {
    width: 100%;
}

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

/* Control panel: the list of heroes */
.cp-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.cp-row-actions {
    display: inline-flex;
    gap: 4px;
    justify-content: flex-end;
}

.cp-row-actions form {
    display: inline;
}

/* Control panel: the form of a hero */
.cp-tabs__count {
    display: inline-block;
    min-width: 20px;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 10px;
    background-color: #eee;
    font-size: 12px;
    text-align: center;
}

.cp-conflict {
    margin-bottom: 20px;
    padding: 16px 20px;
    border: 1px solid #e0a800;
    background-color: #fff8e1;
}

.cp-conflict__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* A language strip: one language of a block at a time. */
.cp-langs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e5e5e5;
}

.cp-langs__tab {
    padding: 6px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: #555;
    font-size: 14px;
}

.cp-langs__tab.is-active {
    border-bottom-color: currentColor;
    color: #111;
    font-weight: 600;
}

.cp-langs__tab.has-error {
    color: #c62828;
}

.cp-langs__pane[hidden] {
    display: none !important;
}

/* The cards of the slides */
.cp-slides-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.cp-slides-toolbar > .cp-icon-button {
    width: auto;
    gap: 6px;
    padding: 0 12px;
    font-size: 14px;
}

.cp-slides {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cp-slide {
    border: 1px solid #ddd;
    background-color: #fff;
}

.cp-slide.is-open {
    border-color: #999;
}

.cp-slide__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
}

.cp-slide__toggle {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
}

.cp-slide__thumb {
    display: flex;
    flex: 0 0 96px;
    align-items: center;
    justify-content: center;
    height: 54px;
    overflow: hidden;
    background-color: #f1f1f1;
    color: #888;
    font-size: 22px;
}

.cp-slide__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cp-slide__summary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-slide__badge {
    display: none;
    padding: 1px 6px;
    background-color: #777;
    color: #fff;
    font-size: 12px;
}

.cp-slide__active {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    white-space: nowrap;
}

.cp-slide__tools {
    display: inline-flex;
    gap: 2px;
}

.cp-slide__body {
    padding: 16px;
    border-top: 1px solid #eee;
}

/* A card that is switched off: kept, in grey, and not shown on the site. */
.cp-slide.is-inactive .cp-slide__thumb {
    filter: grayscale(1);
    opacity: 0.55;
}

.cp-slide.is-inactive .cp-slide__summary {
    color: #888;
}

.cp-slide.is-inactive .cp-slide__badge {
    display: inline-block;
}

/* Home page: a slide written in Html, over its colour and picture */
.hero__backdrop {
    position: absolute;
    inset: 0;
    background-color: #222;
}

.hero__html {
    max-width: 760px;
    color: #fff;
}

.hero__html :last-child {
    margin-bottom: 0;
}

.hero__html img {
    max-width: 100%;
    height: auto;
}

/* Home page: the band of a preview */
.hero-preview-band {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 10px 20px;
    background-color: #fff8e1;
    border-bottom: 1px solid #e0a800;
    font-size: 14px;
}

/* The dialogs of the control panel's questions (SweetAlert2): the type, colours and square corners of the site.
   The icon is made smaller with the library's own zoom; a transform would fight the transform of its animation. */
.swal2-popup.emrekiral-dialog {
    --swal2-icon-zoom: 0.75;
    width: min(440px, calc(100vw - 32px));
    padding: 28px 24px 24px;
    border-radius: 0;
    font-family: inherit;
}

.emrekiral-dialog .swal2-icon {
    margin: 4px auto 16px;
}

.emrekiral-dialog .swal2-html-container {
    margin: 0;
    color: #333;
    font-size: 16px;
    line-height: 1.55;
}

.emrekiral-dialog__actions {
    gap: 8px;
    margin-top: 24px;
}

.emrekiral-dialog__actions .btn {
    min-width: 110px;
}

/* A menu button of the site: its list is placed on the screen by the script, so no scrolling box cuts it off. */
.cp-menu-button {
    display: inline-block;
}

.cp-menu-button.is-open > [data-menu-toggle] {
    border-color: #111;
}

.cp-menu-button__list {
    position: fixed;
    z-index: 1080;
    min-width: 240px;
    padding: 6px 0;
    border: 1px solid #ddd;
    background-color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.cp-menu-button__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 16px;
    border: 0;
    background: none;
    color: #222;
    font-size: 15px;
    text-align: left;
}

.cp-menu-button__item:hover:not(:disabled),
.cp-menu-button__item:focus-visible {
    background-color: #f3f3f3;
    outline: none;
}

.cp-menu-button__item:disabled {
    color: #999;
    cursor: not-allowed;
}

.cp-menu-button__note {
    margin: 4px 16px 4px;
    color: #888;
    font-size: 12px;
    line-height: 1.4;
}

/* A hero of more than one slide is drawn with the mouse or a finger; the page keeps the moves up and down. */
.hero--draggable {
    cursor: grab;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

.hero--draggable img,
.hero--draggable a {
    -webkit-user-drag: none;
}

.hero.is-dragging {
    cursor: grabbing;
}

/* While it is drawn the track follows the pointer at once; let go, it glides again. */
.hero.is-dragging .hero__track {
    transition: none;
}

.hero--draggable .hero__arrow,
.hero--draggable .hero__dot,
.hero--draggable .hero__pause,
.hero--draggable .hero__button {
    cursor: pointer;
}

/* The cookie notice sits 15 pixels inside the bottom corner of the footer. While it is open the script gives the footer
   room for it below its own content (--cookie-notice-room), so it covers neither the working hours nor the copyright. */
.footer-area-wrapper {
    position: relative;
}

.footer-area-wrapper.has-cookie-notice {
    padding-bottom: var(--cookie-notice-room, 0px);
}

.cookie-notice {
    position: absolute;
    right: 15px;
    bottom: 15px;
    z-index: 2;
    width: min(420px, calc(100% - 30px));
    margin: 0;
    padding: 24px 26px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background-color: #fff;
    color: #555;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.cookie-notice.is-shown {
    opacity: 1;
    transform: none;
}

.cookie-notice--bottomleft {
    right: auto;
    left: 15px;
}

.cookie-notice--bar {
    left: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: auto;
}

.cookie-notice__text {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.6;
}

.cookie-notice--bar .cookie-notice__text {
    max-width: 760px;
    margin: 0;
}

.cookie-notice__link {
    margin-left: 4px;
    color: inherit;
    text-decoration: underline;
}

/* Both answers are buttons of the same size: rejecting is as easy as accepting. */
.cookie-notice__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cookie-notice--bar .cookie-notice__actions {
    flex: 0 0 auto;
    min-width: 320px;
}

.cookie-notice__button {
    padding: 12px 16px;
    border: 1px solid #111;
    border-radius: 4px;
    background-color: #fff;
    color: #111;
    font-size: 15px;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cookie-notice__button--reject:hover {
    background-color: #f2f2f2;
}

.cookie-notice__button--accept {
    border-color: #000;
    background-color: #000;
    color: #fff;
}

.cookie-notice__button--accept:hover {
    background-color: #333;
}

.cookie-notice__button:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
}

.cookie-notice--dark {
    border-color: #1b1b1b;
    background-color: #1b1b1b;
    color: #ddd;
}

.cookie-notice--dark .cookie-notice__button--reject {
    border-color: #fff;
    background-color: transparent;
    color: #fff;
}

.cookie-notice--dark .cookie-notice__button--reject:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.cookie-notice--dark .cookie-notice__button--accept {
    border-color: #fff;
    background-color: #fff;
    color: #000;
}

.cookie-notice--dark .cookie-notice__button--accept:hover {
    background-color: #e6e6e6;
}

.cookie-notice--dark .cookie-notice__button:focus-visible {
    outline-color: #fff;
}

@media (max-width: 767px) {
    .cookie-notice,
    .cookie-notice--bottomleft,
    .cookie-notice--bar {
        right: 15px;
        left: 15px;
        display: block;
        width: auto;
        padding: 18px 16px;
    }

    .cookie-notice__text,
    .cookie-notice--bar .cookie-notice__text {
        margin-bottom: 16px;
        font-size: 15px;
    }

    .cookie-notice--bar .cookie-notice__actions {
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-notice {
        transform: none;
        transition: none;
    }
}

/* The footer link that opens the cookie notice again */
.footer-cookie-link {
    display: block;
    margin: 12px auto 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 14px;
    text-decoration: underline;
}

/* The popup window of the site: the picture or video on top, the texts below; as wide as its picture allows, never
   wider than the screen. */
.popup-window__dialog {
    max-width: min(560px, calc(100% - 32px));
    margin-right: auto;
    margin-left: auto;
}

.popup-window__content {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.popup-window__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 16px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Translucent black reads on any picture; under the pointer or the keyboard it takes the primary color of the theme,
   with a dark cross, which reads on that gold. */
.popup-window__close:hover,
.popup-window__close:focus-visible {
    background-color: #dcb14a;
    color: #111;
}

.popup-window__close:focus-visible {
    outline: 2px solid #dcb14a;
    outline-offset: 2px;
}

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

.popup-window__media {
    display: block;
    background-color: #f2f2f2;
}

.popup-window__image,
.popup-window__video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: cover;
}

.popup-window__body {
    padding: 28px 32px 32px;
    text-align: center;
}

.popup-window__title {
    margin: 0 0 12px;
    font-size: 26px;
    line-height: 1.25;
}

.popup-window__text {
    color: #555;
    font-size: 16px;
    line-height: 1.6;
}

.popup-window__text > :last-child {
    margin-bottom: 0;
}

.popup-window__button {
    margin-top: 20px;
    padding: 12px 28px;
}

@media (max-width: 575px) {
    .popup-window__body {
        padding: 22px 20px 24px;
    }

    .popup-window__title {
        font-size: 22px;
    }
}

/* The preview of the control panel opens over the form, which may be a window itself: it and its dark background come
   above that window and its own. */
.popup-window.is-preview {
    z-index: 1065;
}

.modal-backdrop ~ .modal-backdrop {
    z-index: 1060;
}

/* The form of a popup: its languages as switches in a row, a tab of a language it does not open in greyed. */
.cp-popup-languages {
    padding: 18px 20px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

.cp-popup-languages legend {
    float: none;
    width: auto;
    padding: 0 6px;
    font-size: 15px;
    font-weight: 600;
}

.cp-popup-languages__list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin-bottom: 8px;
}

.cp-tabs a.is-muted {
    color: #aaa;
    text-decoration: line-through;
}

.cp-popup-renew {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 32px;
    padding: 18px 20px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

/* The control panel: a page of its own - the menu down the left, a bar on top with the title of the page, and the
   content in the rest of the screen. Below 992 pixels the menu is a drawer that slides in from the left. */
.cp-body {
    background-color: #fff;
}

.cp-shell {
    display: flex;
    min-height: 100vh;
}

/* The menu stands still: it is fixed to the left of the window, so the scrolling of the page does not move it.
   Its top (the logo) and its foot (back to the site, sign out) stay in sight; only the links between them scroll
   when they do not fit, and without a scrollbar. */
.cp-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 264px;
    overflow: hidden;
    border-right: 1px solid #ebebeb;
    background-color: #fff;
}

.cp-sidebar__brand {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    padding: 0 24px;
    border-bottom: 1px solid #ebebeb;
}

.cp-sidebar__logo img {
    width: auto;
    height: 36px;
}

.cp-sidebar__close,
.cp-topbar__menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background-color: #fff;
    color: #333;
    font-size: 18px;
}

.cp-nav {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.cp-nav::-webkit-scrollbar {
    display: none;
}

.cp-nav__heading {
    margin: 22px 12px 6px;
    color: #999;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cp-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 2px;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #333;
    font-size: 15px;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cp-nav__link > i:first-child {
    flex: 0 0 20px;
    color: #888;
    font-size: 17px;
    text-align: center;
}

.cp-nav__link:hover,
.cp-nav__link:focus-visible {
    background-color: #f5f5f5;
    color: #111;
}

/* The page being shown, in a light tone of the primary color of the theme. */
.cp-nav__link.is-active,
.cp-nav__group.is-current {
    background-color: #faf3e1;
    color: #7a5c0f;
    font-weight: 600;
}

.cp-nav__link.is-active > i:first-child,
.cp-nav__group.is-current > i:first-child {
    color: #b8901f;
}

.cp-nav__chevron {
    margin-left: auto;
    font-size: 12px;
    transition: transform 0.2s ease;
}

.cp-nav__group[aria-expanded="true"] .cp-nav__chevron {
    transform: rotate(180deg);
}

.cp-nav__group.is-current:not(.collapsed) {
    background-color: transparent;
}

.cp-nav__children {
    padding-left: 20px;
}

.cp-sidebar__foot {
    flex: 0 0 auto;
    padding: 12px;
    border-top: 1px solid #ebebeb;
}

.cp-sidebar__foot form {
    margin: 0;
}

.cp-frame {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    margin-left: 264px;
}

.cp-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 72px;
    padding: 0 32px;
    border-bottom: 1px solid #ebebeb;
    background-color: #fff;
}

.cp-topbar__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 24px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-topbar__end {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 20px;
}

.cp-topbar__user {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #555;
    font-size: 15px;
}

.cp-topbar__user:hover {
    color: #111;
}

/* The languages of the bar, side by side; the current one stands out. */
.cp-languages {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    background-color: #f6f6f7;
}

.cp-languages__item {
    padding: 4px 10px;
    border-radius: 7px;
    color: #666;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.cp-languages__item:hover {
    color: #111;
}

.cp-languages__item[aria-current="true"] {
    background-color: #fff;
    color: #111;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.cp-main {
    flex: 1 1 auto;
    padding: 32px;
}

/* The content keeps the field styles the theme gives the account page (myaccount-content), without its framed box:
   the page itself is the frame here. */
.cp-main > .myaccount-content {
    padding: 0;
    border: 0;
}

/* The head of a page of the panel, now that its title is in the bar: a link back stays on the left, a button that
   adds goes to the right. */
.cp-toolbar > .btn:last-child,
.cp-list-head > .btn:last-child {
    margin-left: auto;
}

.cp-overlay {
    position: fixed;
    inset: 0;
    z-index: 1035;
    background-color: rgba(0, 0, 0, 0.4);
}

@media (max-width: 991px) {
    .cp-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        width: min(300px, 86vw);
        height: auto;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    /* The drawer lies over the page; the page has the whole width. */
    .cp-frame {
        margin-left: 0;
    }

    .cp-shell.is-drawer-open .cp-sidebar {
        transform: none;
    }

    .cp-sidebar__close,
    .cp-topbar__menu {
        display: flex;
    }

    .cp-topbar {
        gap: 12px;
        min-height: 64px;
        padding: 0 16px;
    }

    .cp-topbar__title {
        font-size: 20px;
    }

    .cp-main {
        padding: 24px 16px;
    }
}

@media (max-width: 575px) {
    .cp-topbar__user span {
        display: none;
    }

    .cp-topbar__end {
        gap: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-sidebar,
    .cp-nav__link,
    .cp-nav__chevron {
        transition: none;
    }
}

/* The page list of the control panel: the pages the settings require, above the table, each a button that opens
   a form. A red border marks one that is not written yet, a green one a page that is. */
.cp-required-pages {
    margin-bottom: 24px;
    padding: 20px 24px;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    background-color: #fff;
}

.cp-required-pages__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 0 0 12px;
    color: #222;
    font-size: 15px;
    font-weight: 600;
}

.cp-required-pages__count {
    color: #b42318;
    font-size: 13px;
    font-weight: 400;
}

.cp-required-pages__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cp-required-pages__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
}

.cp-required-pages__link--missing {
    border-color: #e5484d;
    color: #b42318;
}

.cp-required-pages__link--missing:hover,
.cp-required-pages__link--missing:focus-visible {
    background-color: #fdecec;
    color: #b42318;
}

.cp-required-pages__link--written {
    border-color: #2f9e5b;
    color: #1e7a3c;
}

.cp-required-pages__link--written:hover,
.cp-required-pages__link--written:focus-visible {
    background-color: #e6f6ec;
    color: #1e7a3c;
}

/* The lists of the control panel: a table in a frame with rounded corners. The first cell names the row - a small
   picture, the name, a quiet second line - the pills say where it stands, and the actions stand on the right. Below
   768 pixels every row is a card: the name on top, the other cells under it with their headings, the actions last. */
.cp-table-wrap {
    overflow: hidden;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    background-color: #fff;
}

.cp-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    color: #333;
    font-size: 15px;
}

.cp-table thead th {
    padding: 14px 20px;
    border-bottom: 1px solid #ebebeb;
    background-color: #fafafa;
    color: #666;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.cp-table tbody td {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.cp-table tbody tr:last-child td {
    border-bottom: 0;
}

.cp-table tbody tr {
    transition: background-color 0.15s ease;
}

.cp-table tbody tr:hover {
    background-color: #fcfbf7;
}

.cp-table__muted {
    color: #888;
}

.cp-table__actions,
.cp-table__order {
    width: 1%;
    white-space: nowrap;
}

.cp-table__actions {
    text-align: right;
}

.cp-table__actions .cp-row-actions {
    justify-content: flex-end;
}

.cp-order {
    display: inline-flex;
    gap: 4px;
}

.cp-order form {
    display: inline;
}

/* The cell that names the row. */
.cp-entity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.cp-entity__thumb {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 8px;
    background-color: #f4f5f7;
    color: #999;
    font-size: 18px;
}

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

.cp-entity__thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

.cp-entity__thumb--round {
    border-radius: 50%;
    color: #555;
    font-size: 14px;
    font-weight: 600;
}

.cp-entity__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cp-entity__text--child {
    position: relative;
    padding-left: 26px;
}

.cp-entity__text--child::before {
    content: "\21B3";
    position: absolute;
    top: 0;
    left: 4px;
    color: #aaa;
}

.cp-entity__name {
    color: #111;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cp-entity__name:hover {
    color: #7a5c0f;
}

.cp-entity__sub {
    margin-top: 2px;
    color: #888;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.cp-entity__sub--error {
    color: #b42318;
}

/* The "Record" cell at the end of every list: who created the row, and under it, quieter, when. */
.cp-record {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}

.cp-record__by {
    color: #333;
    white-space: nowrap;
}

.cp-record__at {
    color: #999;
    font-size: 13px;
    white-space: nowrap;
}

/* The pills: tinted by what they say (ControlPanelTones). */
.cp-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: #f1f1f1;
    color: #555;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.cp-pill--green {
    background-color: #e6f6ec;
    color: #1e7a3c;
}

.cp-pill--amber {
    background-color: #fdf3d7;
    color: #8a6410;
}

.cp-pill--blue {
    background-color: #e8f0fd;
    color: #1d4ed8;
}

.cp-pill--red {
    background-color: #fdecec;
    color: #b42318;
}

/* The codes of the languages a row is shown or translated in. */
.cp-codes {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cp-code {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    color: #444;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* The bar above a list: the search and the filters side by side (on as many lines as they need), and on the right the
   button that adds. */
.cp-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin-bottom: 20px;
}

.cp-filters__field {
    flex: 0 1 200px;
    min-width: 150px;
    margin: 0;
}

.cp-filters__field--grow {
    flex: 1 1 280px;
    max-width: 420px;
}

.cp-filters__field--narrow {
    flex: 0 1 130px;
    min-width: 110px;
}

.cp-filters__field--wide {
    flex: 0 1 240px;
}

.cp-filters .cp-filters__label {
    display: block;
    margin-bottom: 6px;
    color: #777;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Above the field styles the theme gives every form of the content (.myaccount-content form ...): the bar keeps its
   own fields and does not move up as the theme moves its forms. */
.cp-content form.cp-filters {
    margin-top: 0;
}

.cp-content .cp-filters .single-input-item input {
    width: 100%;
    height: 48px;
    padding: 10px 12px;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
}

.cp-content .cp-filters .single-input-item input:focus {
    border-color: #dcb14a;
}

.cp-search {
    position: relative;
    display: block;
}

.cp-search > i {
    position: absolute;
    top: 50%;
    left: 14px;
    color: #999;
    transform: translateY(-50%);
    pointer-events: none;
}

.cp-content .cp-filters .cp-search input {
    padding-left: 40px;
}

.cp-filters__buttons {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cp-filters__add {
    margin-left: auto;
}

.cp-table-count {
    margin: -6px 0 12px;
    color: #888;
    font-size: 14px;
}

@media (max-width: 767px) {
    .cp-table-wrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: none;
    }

    .cp-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .cp-table,
    .cp-table tbody {
        display: block;
    }

    .cp-table tbody tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 12px;
        padding: 14px 16px;
        border: 1px solid #ebebeb;
        border-radius: 12px;
        background-color: #fff;
    }

    .cp-table tbody tr:hover {
        background-color: #fff;
    }

    .cp-table tbody td,
    .cp-table tbody tr:last-child td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: auto;
        padding: 6px 0;
        border: 0;
        text-align: right;
    }

    /* The heading of the cell, in front of its value. */
    .cp-table tbody td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: #888;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-align: left;
        text-transform: uppercase;
    }

    .cp-table tbody td.cp-table__main {
        order: -1;
        display: block;
        margin-bottom: 6px;
        padding: 0 0 12px;
        border-bottom: 1px solid #f0f0f0;
        text-align: left;
    }

    .cp-record {
        align-items: flex-end;
    }

    .cp-table tbody td.cp-table__actions {
        order: 99;
        justify-content: flex-end;
        padding-top: 10px;
    }

    .cp-filters__field,
    .cp-filters__field--grow,
    .cp-filters__field--narrow,
    .cp-filters__field--wide {
        flex: 1 1 100%;
        max-width: none;
    }

    .cp-filters__add {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-table tbody tr {
        transition: none;
    }
}

/* Control panel: a list the form saves as a whole (data-item-list): the bank accounts and the required pages of the
   settings. The fields of a new item stand on top, each with its label above it, and the switch and the button beside
   them are level with the inputs (the error of the fields has a line of its own, so the bottoms meet); the items are
   listed below, a line each. The checkboxes, "select all" and the button of the selected items show from two items on
   (item-list--many, set by site.js). */
.item-list__entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto auto;
    gap: 12px 16px;
    align-items: end;
}

/* A list of one field, such as the codes of the required pages: the button stays beside the field. The list spans
   the form like every other field, so it ends where the buttons of the form do. */
.item-list--single .item-list__entry {
    grid-template-columns: minmax(0, 1fr) auto;
}

.item-list__field label {
    display: block;
    margin-bottom: 4px;
}

.item-list__field input {
    height: 50px;
}

/* As tall as the input. */
.item-list__entry .item-list__switch,
.item-list__entry .item-list__add {
    min-height: 50px;
}

/* The Add button and the Delete button of an item show their icon alone, their name being their label and title.
   They are as wide as each other, so the switches beside them stand in one column. */
.item-list__add,
.item-list__item .item-list__delete {
    justify-content: center;
    width: 50px;
    padding: 0;
}

.item-list__add {
    display: inline-flex;
    align-items: center;
    font-size: 18px;
}

.item-list__entry .item-list__error {
    grid-column: 1 / -1;
    margin-top: 0;
}

.item-list__head {
    display: none;
    margin-top: 16px;
}

.item-list__items {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

/* An item is a line between two rules, from the left edge of the form to its right edge, like the fields above. */
.item-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 12px 0;
    border-bottom: 1px solid #e5e5e5;
}

.item-list__item:first-child {
    border-top: 1px solid #e5e5e5;
}

.item-list .item-list__select {
    display: none;
}

.item-list--many .item-list__head {
    display: block;
}

.item-list--many .item-list__select {
    display: inline-flex;
}

.item-list__text {
    display: flex;
    flex: 1 1 160px;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 16px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.item-list__primary {
    color: #222;
    font-weight: 500;
}

.item-list__secondary {
    color: #555;
    font-variant-numeric: tabular-nums;
}

.item-list__text .field-error {
    flex-basis: 100%;
    margin-top: 0;
}

.item-list__delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid #f0c4c1;
    background-color: #fff;
    color: #b3261e;
    cursor: pointer;
}

.item-list__delete:hover,
.item-list__delete:focus-visible {
    border-color: #b3261e;
}

.item-list__delete-selected {
    margin-top: 12px;
}

.item-list__delete-selected[hidden] {
    display: none;
}

.item-list__empty {
    margin: 16px 0 0;
    color: #777;
}

.item-list__empty[hidden] {
    display: none;
}

/* A narrow screen stacks the fields on top, with the switch and the button under them; a list of one field keeps its
   button beside the field. */
@media (max-width: 767px) {
    .item-list:not(.item-list--single) .item-list__entry {
        grid-template-columns: minmax(0, 1fr);
    }

    .item-list:not(.item-list--single) .item-list__entry .item-list__switch {
        min-height: 0;
    }

    .item-list:not(.item-list--single) .item-list__entry .item-list__add {
        justify-self: start;
    }
}

/* Footer: the pages of the company on the social networks, under the logo. */
.footer-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.footer-social a {
    color: #777;
}

.footer-social a:hover,
.footer-social a:focus-visible {
    color: #222;
}

/* Footer: the QR code of the ETBIS registration, under the social links, with a line under it. The picture is drawn
   larger than it is shown, so its modules stay sharp. */
.footer-etbis {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    color: #777;
    font-size: 12px;
}

.footer-etbis img {
    width: 72px;
    height: 72px;
    image-rendering: pixelated;
}

.footer-etbis:hover,
.footer-etbis:focus-visible {
    color: #222;
}

/*
 * Sticky header: a white bar with a soft shadow below it. It slides away while the page is scrolled down and comes
 * back as soon as it is scrolled up, staying until the very top of the page; there it settles into its place and its
 * white surface fades out (site.js toggles is-hidden and is-settling). The slide replaces the theme's fade-in.
 */
.header-area.header-sticky.is-sticky {
    background-color: #fff;
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(0, 0, 0, 0.04);
    animation: none;
    transform: translateY(0);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow 0.3s ease;
}

.header-area.header-sticky.is-sticky.is-hidden {
    transform: translateY(-100%);
    box-shadow: none;
}

/* Set for one frame while the header becomes sticky, so it takes its first position without sliding. */
.header-area.header-sticky.is-sticky--instant {
    transition: none;
}

/* Back in its place at the top: the white surface, the shadow and the colours of the bar fade into those of the page. */
.header-area.header-sticky.is-settling {
    transition: background-color 0.6s ease, box-shadow 0.6s ease;
}

.header-area.header-sticky.is-settling .logo img {
    transition: filter 0.6s ease;
}

.header-area.header-sticky.is-settling .header-menu__toggle,
.header-area.header-sticky.is-settling .mobile-navigation-icon,
.header-area.header-sticky.is-settling .navigation-menu > ul > li > a {
    transition: color 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
    .header-area.header-sticky.is-sticky,
    .header-area.header-sticky.is-settling,
    .header-area.header-sticky.is-settling * {
        transition: none;
    }
}

/* Hero-specific topbar styles; sticky and dropdown surfaces retain their normal appearance. */
.header-area--default.site-topbar--transparent {
    position: absolute;
    inset: 0 0 auto;
    z-index: 100;
    background: transparent;
}

.site-topbar--transparent > .header-area:not(.is-sticky) {
    background: transparent;
    box-shadow: none;
}

.site-topbar--inverted:not(.site-topbar--transparent),
.site-topbar--inverted:not(.site-topbar--transparent) > .header-area:not(.is-sticky) {
    background: #111;
}

.site-topbar--inverted > .header-area:not(.is-sticky) .logo img {
    filter: invert(1);
}

.site-topbar--inverted > .header-area:not(.is-sticky) .header-menu__toggle,
.site-topbar--inverted > .header-area:not(.is-sticky) .mobile-navigation-icon,
.site-topbar--inverted > .header-area:not(.is-sticky) .navigation-menu > ul > li > a {
    color: #fff;
}

.site-topbar--transparent ~ #main-wrapper .hero--full {
    height: 100vh;
    height: 100svh;
}

.site-topbar--transparent ~ #main-wrapper .hero__content {
    padding-top: 90px;
}