/* ==========================================================================
   Voditel.co.il
   ========================================================================== */

:root {
    --color-page-bg: #ABABAB;
    --color-surface: #FFFFFF;
    --color-text: #000000;
    --color-text-soft: #313131;
    --color-link: #0000FF;
    --color-border: #535353;
    --color-line: #999999;
    --color-top-menu-text: #3E3E3E;
    --color-top-menu-hover: #17606E;
    --color-side-menu-text: #FFFFFF;
    --color-breadcrumb-link: #5F4427;
    --color-footer-bg: #EBEBEB;
    --color-footer-border: #808080;
    --color-focus: #000000;
    --color-note-bg: #FCE8B3;
    --color-active-bg: #C9CFC5;
    --color-table-head: #C0C0C0;
    --color-row-line: #C8C8C8;
    --color-law-bg: #F7F7F7;
    --color-card-active: #17606E;
    --color-side-menu-bg: linear-gradient(to bottom, #1479A0, #0F6485);
    --color-side-menu-active-bg: #A5D9EE;
    --color-side-menu-active-text: #000000;
    --color-sign-bg: #1558B0;
    --color-sign-active-bg: #0D3F82;
    --color-sign-text: #FFFFFF;
    --color-focus-bg: #FFE566;
    --color-focus-text: #000000;
    --color-exam-right: #1B6B2C;
    --color-exam-right-bg: #D5F0D8;
    --color-exam-wrong: #A61B14;

    --font-text: Verdana, Geneva, Arial, Helvetica, sans-serif;
    --font-title: Tahoma, Verdana, Geneva, sans-serif;

    --font-size-small: 0.6875rem;  /* 11px */
    --font-size-text: 0.75rem;     /* 12px */
    --font-size-title: 0.9375rem;  /* 15px */
    --font-size-big: 1rem;         /* 16px */
    --font-size-hebrew: 0.875rem;  /* 14px */

    --page-width: 999px;
    --side-menu-width: 187px;
}

/* Base
   ========================================================================== */

body {
    margin: 0;
    padding: 2px 0 3px;
    background: var(--color-page-bg) url("../images/background.jpg") repeat-x;
    color: var(--color-text);
    font-family: var(--font-text);
    font-size: var(--font-size-text);
    line-height: 1.5;
}

a {
    color: var(--color-link);
}

/* Keyboard focus: a thick outline on every link and button,
   and a highlight behind the text of a link. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

a:focus-visible:not(.card, .side-menu__item) {
    background-color: var(--color-focus-bg);
    color: var(--color-focus-text);
}

main:focus {
    outline: none;
}

.skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    z-index: 10;
    padding: 8px 12px;
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: bold;
}

.skip-link:focus {
    inset-inline-start: 0;
}

/* Page frame
   ========================================================================== */

.page {
    width: var(--page-width);
    margin: 0 auto;
}

.site-header__image {
    display: block;
    width: 100%;
    height: auto;
}

.page-body {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

/* The four thin lines at the bottom of the page */
.bottom-line {
    height: 4px;
    background: linear-gradient(
        to bottom,
        #2B84BA 0 1px,
        #34789F 1px 2px,
        #40687F 2px 3px,
        #495C64 3px 4px
    );
}

.site-footer {
    margin-top: 3px;
    padding: 5px;
    border: 1px solid var(--color-footer-border);
    background: var(--color-footer-bg);
}

.site-footer__email {
    margin-inline-start: 25px;
}

/* Home page
   ========================================================================== */

.top-menu {
    box-sizing: border-box;
    height: 40px;
    border-bottom: 1px solid var(--color-line);
    background: url("../images/menu_bg.jpg") repeat-x;
}

.top-menu__list {
    display: flex;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.top-menu__item {
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-inline-end: 1px solid var(--color-line);
}

.top-menu__link {
    color: var(--color-top-menu-text);
    font-size: var(--font-size-big);
    font-weight: bold;
    line-height: normal;
    text-decoration: none;
}

.top-menu__link:hover {
    color: var(--color-top-menu-hover);
    text-decoration: underline;
}

.home__title {
    margin: 17px 0 18px;
    color: var(--color-top-menu-text);
    font-size: 1.25rem; /* 20px; in rem, so it grows with the display settings */
    font-weight: bold;
    line-height: normal;
    text-align: center;
}

.home__cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    width: 960px;
    margin: 0 auto 30px;
    padding: 0;
    list-style: none;
}

/* Three cards fill one row of the page. More cards go to the next row. */
.home__cards-item {
    display: flex;
    flex: 0 1 300px;
}

/* Card: one link with an image and a title. All cards have the same size. */
.card {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    border: 2px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.card__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 5;
}

.card__title {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 3em;
    padding: 10px 12px;
    border-top: 2px solid var(--color-border);
    font-family: var(--font-title);
    font-size: var(--font-size-big);
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.card:hover,
.card:focus-visible {
    border-color: var(--color-card-active);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
    transform: translateY(-4px);
}

.card:hover .card__title,
.card:focus-visible .card__title {
    border-top-color: var(--color-card-active);
    background: var(--color-card-active);
    color: var(--color-surface);
    text-decoration: underline;
}

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

    .card:hover,
    .card:focus-visible {
        transform: none;
    }
}

/* Inner pages
   ========================================================================== */

.breadcrumb {
    box-sizing: border-box;
    height: 30px;
    padding-inline-start: 7.5px;
    border-bottom: 1px solid var(--color-line);
    background: url("../images/path_bg2.jpg") repeat-x;
    font-size: var(--font-size-small);
    font-weight: bold;
    line-height: 28px;
}

.breadcrumb__link {
    color: var(--color-breadcrumb-link);
}

.inner {
    display: flex;
    align-items: flex-start;
}

.side-menu {
    flex: none;
    width: var(--side-menu-width);
    padding-bottom: 36px;
}

.side-menu__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.side-menu__item {
    display: block;
    box-sizing: border-box;
    width: 185px;
    height: 26px;
    margin: 5px auto 0;
    padding-inline-start: 8px;
    border-radius: 3px;
    /* A colour instead of the old button image: white text on the image had too little contrast. */
    background: var(--color-side-menu-bg);
    color: var(--color-side-menu-text);
    font-weight: bold;
    line-height: 26px;
    text-decoration: none;
}

a.side-menu__item:hover {
    text-decoration: underline;
}

/* The current section: another colour and a bar at the start, so colour is not the only sign. */
.side-menu__item--active {
    border-inline-start: 5px solid var(--color-side-menu-active-text);
    background: var(--color-side-menu-active-bg);
    color: var(--color-side-menu-active-text);
}

.inner__content {
    flex: 1;
    min-width: 0;
    padding: 20px;
}

.page-title {
    box-sizing: border-box;
    min-height: 26px;
    margin: 0;
    border-bottom: 2px solid var(--color-border);
    font-family: var(--font-title);
    font-size: var(--font-size-title);
    font-weight: bold;
    line-height: 24px;
}

/* Main page of a section: the title on the left, a small copy of the section image on the right.
   The title box is as high as the image, so the line under the title ends at the bottom of the image. */
.section-head {
    display: flex;
    align-items: stretch;
    gap: 5px;
    padding-bottom: 15px;  /* padding, not margin: a margin would merge with the margin of the next block */
}

.section-head .page-title {
    flex: 1;
    min-width: 0;
    padding-bottom: 4px;
    font-size: 1.5rem;
    line-height: 1.25;
}

/* A sub-title right under the title block starts as far from it as a paragraph does,
   so the space under the title line is the same on every main page */
.section-head + .section-title,
.section-head + * > .section-title:first-child {
    margin-top: 10px;
}

/* The same frame as the cards of the home page */
.section-head__image {
    flex: none;
    align-self: flex-end;
    width: 126px;
    height: 70px;
    border: 2px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
}

.inner-footer {
    padding-top: 1px;
    border-top: 2px solid var(--color-page-bg);
}

.inner-footer__link {
    color: var(--color-text-soft);
    font-size: var(--font-size-small);
    text-decoration: none;
}

.inner-footer__icon {
    vertical-align: middle;
}

.inner-footer__text {
    position: relative;
    top: -3px;
    text-decoration: underline;
}

/* Text content of the inner pages
   ========================================================================== */

.inner__content p,
.inner__content ul,
.inner__content ol {
    margin: 10px 0;
}

.section-title {
    margin: 22px 0 8px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--color-page-bg);
    font-size: var(--font-size-text);
    font-weight: bold;
}

.note {
    padding: 6px 8px;
    background: var(--color-note-bg);
}

/* Signs
   ========================================================================== */

.sign-sections {
    padding-inline-start: 28px;
    line-height: 2;
}

.sign-sections__info {
    color: var(--color-text-soft);
}

.sign-nav {
    margin: 0 0 18px;
}

.sign-nav__list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-small);
    font-weight: bold;
}

.sign-nav__item {
    display: block;
    padding: 4px 8px;
}

.sign-nav__item--active {
    background: var(--color-active-bg);
}

.sign-table {
    width: 100%;
    border: 1px solid var(--color-border);
    border-collapse: collapse;
}

.sign-table__caption {
    padding-bottom: 6px;
    color: var(--color-text-soft);
    font-size: var(--font-size-small);
    text-align: start;
}

.sign-table th,
.sign-table td {
    padding: 8px;
    border-bottom: 1px solid var(--color-row-line);
    font-weight: normal;
    text-align: start;
    vertical-align: top;
}

.sign-table thead th {
    padding: 4px 8px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-table-head);
    font-family: var(--font-title);
    font-size: var(--font-size-title);
    font-weight: bold;
}

.sign-table .sign-table__image {
    width: 170px;
    text-align: center;
}

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

.sign-table .sign-table__number {
    width: 56px;
    font-family: var(--font-title);
    font-size: var(--font-size-title);
    font-weight: bold;
    white-space: nowrap;
}

.sign-table .sign-table__applies {
    width: 30%;
}

.sign-table__link {
    color: inherit;
    text-decoration: none;
}

.sign-table__link:hover {
    text-decoration: underline;
}

/* The sign that a direct link points to */
.sign-table tr {
    scroll-margin-top: 12px;
}

.sign-table tr:target {
    background: var(--color-note-bg);
    outline: 3px solid var(--color-border);
    outline-offset: -3px;
}
/* Regulations
   ========================================================================== */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.topic-list {
    padding-inline-start: 30px;
    line-height: 2;
}

.topic-list__summary {
    color: var(--color-text-soft);
}

.topic-text li {
    margin: 4px 0;
}

.sign-ref {
    white-space: nowrap;
}

.rule-ref {
    font-size: var(--font-size-small);
    white-space: nowrap;
}

.rule-ref::before {
    content: "[";
}

.rule-ref::after {
    content: "]";
}

.law-meta {
    color: var(--color-text-soft);
    font-size: var(--font-size-small);
}

.law-text {
    padding: 8px 12px;
    border: 1px solid var(--color-row-line);
    background: var(--color-law-bg);
}

.law-text--he {
    font-family: Arial, "Arial Hebrew", "Noto Sans Hebrew", sans-serif;
    font-size: var(--font-size-hebrew);
    text-align: start;
}

.inner__content .law-text__title {
    margin: 4px 0 10px;
    font-weight: bold;
}

.inner__content .law-text__p {
    margin: 6px 0;
}

/* Indentation of sub-sections: each level moves the paragraph one step in.
   A paragraph that starts with a marker, like (а) or (1), hangs its marker out of the text. */
.law-text {
    --law-step: 26px;
    --law-marker: 2em;
}

.law-text__p {
    padding-inline-start: calc(var(--law-level, 0) * var(--law-step));
}

.law-text__p--marker {
    padding-inline-start: calc(var(--law-level, 0) * var(--law-step) + var(--law-marker));
    text-indent: calc(-1 * var(--law-marker));
}

.law-text__p--1 {
    --law-level: 1;
}

.law-text__p--2 {
    --law-level: 2;
}

.law-text__p--3 {
    --law-level: 3;
}

.law-text__p--4 {
    --law-level: 4;
}

.law-text__p--5 {
    --law-level: 5;
}

.law-table-wrap {
    margin: 8px 0;
    overflow-x: auto;
}

.law-table {
    border-collapse: collapse;
    background: var(--color-surface);
}

.law-table td {
    padding: 4px 6px;
    border: 1px solid var(--color-row-line);
    vertical-align: top;
}

.law-pager {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 10px;
}

.law-pager__next {
    margin-inline-start: auto;
}

.law-list {
    padding-inline-start: 20px;
    line-height: 1.9;
}

.law-list__chapter {
    margin: 16px 0 4px;
    font-size: var(--font-size-text);
}

.law-list__section {
    margin: 10px 0 2px;
    color: var(--color-text-soft);
    font-size: var(--font-size-small);
}

.law-list__he {
    color: var(--color-text-soft);
    font-weight: normal;
}
/* Narrow screens: the page becomes fluid
   ========================================================================== */

@media (max-width: 1018px) {
    .page {
        width: auto;
        max-width: var(--page-width);
    }

    .top-menu {
        height: auto;
        min-height: 40px;
    }

    .top-menu__list {
        flex-wrap: wrap;
    }

    .top-menu__item {
        min-height: 39px;
    }

    .home__title {
        padding: 0 10px;
    }

    .home__cards {
        width: auto;
        max-width: 960px;
        padding: 0 10px;
    }

    .breadcrumb {
        height: auto;
        min-height: 30px;
        padding: 6px 8px;
        background-size: auto 100%;
        line-height: 1.5;
    }

    .page-title {
        height: auto;
        min-height: 26px;
        padding-bottom: 2px;
        line-height: 1.3;
    }

    .site-footer__email {
        display: inline-block;
    }
}

/* Mobile view: one column
   ========================================================================== */

@media (max-width: 640px) {
    :root {
        --font-size-small: 0.8125rem;  /* 13px */
        --font-size-text: 0.875rem;    /* 14px */
        --font-size-title: 1.0625rem;  /* 17px */
        --font-size-hebrew: 1rem;      /* 16px */
    }

    .site-header__image {
        height: 80px;
        object-fit: cover;
        object-position: left center;
    }

    .top-menu__item {
        min-height: 43px;
    }

    .home__cards {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .home__cards-item {
        flex: none;
        width: 100%;
        max-width: 360px;
    }

    .inner {
        flex-direction: column;
        align-items: stretch;
    }

    .side-menu {
        width: auto;
        padding: 0 5px 5px;
    }

    .side-menu__list {
        display: flex;
        flex-wrap: wrap;
        gap: 0 5px;
    }

    .side-menu__list li {
        display: flex;
        flex: 1 1 140px;
    }

    /* The button grows with a label of two lines; the buttons of a row keep one height */
    .side-menu__item {
        display: flex;
        flex: 1;
        align-items: center;
        width: auto;
        height: auto;
        min-height: 44px;
        padding-block: 4px;
        padding-inline-end: 8px;
        background-size: 100% 100%;
        line-height: 1.3;
    }

    .inner__content {
        padding: 12px;
    }

    .inner-footer {
        padding: 6px 4px;
    }

    .site-footer {
        padding: 10px;
    }

    /* Sign table: each sign becomes a block */
    .sign-table,
    .sign-table tbody,
    .sign-table tr,
    .sign-table th,
    .sign-table td {
        display: block;
    }

    .sign-table__caption {
        display: block;
        padding: 6px 10px;
    }

    .sign-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .sign-table tbody tr {
        padding: 12px 10px;
        border-bottom: 1px solid var(--color-row-line);
    }

    .sign-table tbody th,
    .sign-table tbody td {
        width: auto;
        padding: 3px 0;
        border-bottom: 0;
    }

    .sign-table .sign-table__image,
    .sign-table .sign-table__number {
        width: auto;
        text-align: center;
    }

    .sign-table .sign-table__applies {
        width: auto;
        color: var(--color-text-soft);
    }

    .sign-table__applies::before {
        content: attr(data-label) ": ";
        font-weight: bold;
    }

    .sign-table__applies:empty {
        display: none;
    }

    .sign-nav__item {
        padding: 8px;
    }

    .law-text {
        --law-step: 14px;
        --law-marker: 1.8em;
    }

    .law-list,
    .topic-list {
        line-height: 1.6;
    }

    .law-list li,
    .topic-list li {
        margin: 8px 0;
    }
}

/* Display settings: a floating sign at the left edge of the window.
   A click on the sign opens the menu. The sign does not move when the page is scrolled.
   ========================================================================== */

.display-settings {
    display: none;
    position: fixed;
    inset-inline-start: 0;
    top: 150px;
    z-index: 20;
}

/* The settings need JavaScript. The script puts the class "js" on <html>. */
html.js .display-settings {
    display: block;
}

.display-settings__sign {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    border: 2px solid var(--color-sign-text);
    border-inline-start: 0;
    border-radius: 0 8px 8px 0;
    background: var(--color-sign-bg);
    color: var(--color-sign-text);
    cursor: pointer;
    list-style: none;
}

.display-settings__sign::-webkit-details-marker {
    display: none;
}

.display-settings__sign:hover,
.display-settings[open] > .display-settings__sign {
    background: var(--color-sign-active-bg);
}

.display-settings__sign:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.display-settings__icon {
    display: block;
    fill: currentColor;
}

.display-settings__menu {
    position: absolute;
    inset-inline-start: 54px;
    top: 0;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100vw - 62px);
    max-height: calc(100vh - 160px);
    overflow: auto;
    padding: 10px 12px;
    border: 2px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    color: var(--color-text);
    font-size: var(--font-size-text);
}

.display-settings__title {
    margin: 0 0 8px;
    font-family: var(--font-title);
    font-size: var(--font-size-title);
    font-weight: bold;
}

.display-settings__group {
    margin: 0 0 10px;
}

.display-settings__label {
    display: block;
    margin-bottom: 3px;
    font-weight: bold;
}

.display-settings__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.display-settings__more {
    margin: 0;
}

.display-settings__button {
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    cursor: pointer;
}

.display-settings__button:hover {
    background: var(--color-active-bg);
}

/* The chosen value: inverted colours, a check mark and an underline */
.display-settings__button[aria-pressed="true"] {
    background: var(--color-text);
    color: var(--color-surface);
    font-weight: bold;
    text-decoration: underline;
}

.display-settings__button[aria-pressed="true"]::before {
    content: "✓ ";
}

/* Footer links and legal pages
   ========================================================================== */

.site-footer__text {
    margin: 0;
}

.site-footer__nav {
    margin-top: 4px;
}

.site-footer__list {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.legal-updated {
    color: var(--color-text-soft);
    font-size: var(--font-size-small);
}

/* Lists and tables of the text pages: the legal pages and the toll roads */
.inner__content .legal-list,
.inner__content .info-list {
    padding-inline-start: 22px;
}

.legal-list li,
.info-list li {
    margin: 4px 0;
}

.legal-table-wrap,
.info-table-wrap {
    margin: 8px 0 14px;
    overflow-x: auto;
}

.legal-table,
.info-table {
    border-collapse: collapse;
}

.legal-table caption,
.info-table caption {
    padding-bottom: 4px;
    font-weight: bold;
    text-align: start;
}

.legal-table th,
.legal-table td,
.info-table th,
.info-table td {
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    text-align: start;
    vertical-align: top;
}

.legal-table th,
.info-table thead th {
    background: var(--color-table-head);
}

.info-table tbody th {
    font-weight: normal;
}

.info-table td {
    white-space: nowrap;
}

/* Toll roads
   ========================================================================== */

/* The map of the roads: beside the list on a wide screen, above it on a narrow one */
.road-map {
    float: inline-end;
    width: 300px;
    max-width: 100%;
    margin: 0 0 12px 18px;
}

.road-map__image {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--color-border);
}

.road-map__caption {
    margin-top: 4px;
    color: var(--color-text-soft);
    font-size: var(--font-size-small);
}

.inner__content .road-list {
    margin: 0 0 16px;
    padding-inline-start: 26px;
}

.inner__content > .note {
    clear: both;
}

.road-list__item {
    margin: 0 0 12px;
}

.road-list__link {
    font-weight: bold;
}

.road-list__he {
    display: inline-block;
    margin-inline-start: 6px;
    color: var(--color-text-soft);
    font-family: Arial, "Arial Hebrew", "Noto Sans Hebrew", sans-serif;
}

.road-list__summary {
    display: block;
}

/* The main facts of a road: a list of names and values */
.inner__content .road-facts {
    margin: 12px 0 16px;
    padding: 8px 12px;
    border: 1px solid var(--color-row-line);
    background: var(--color-law-bg);
}

.road-facts__row {
    display: flex;
    gap: 4px 12px;
    padding: 3px 0;
}

.road-facts dt {
    flex: 0 0 11.5em;
    font-weight: bold;
}

.road-facts dd {
    flex: 1;
    margin: 0;
}

.road-link-host {
    color: var(--color-text-soft);
    font-size: var(--font-size-small);
}

@media (max-width: 640px) {
    .road-map {
        float: none;
        margin: 0 auto 14px;
    }

    .road-facts__row {
        flex-direction: column;
    }

    .road-facts dt {
        flex: none;
    }
}

/* Study driving: the questions of the theory exam
   ========================================================================== */

/* The choice of the licence class */
.inner__content .exam-classes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    list-style: none;
}

.exam-classes__item {
    display: block;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
}

/* The chosen class: a thick border and the word "выбрано", so colour is not the only sign */
.exam-classes__item--active {
    border-width: 3px;
    background: var(--color-active-bg);
}

/* A button, and a link that looks like a button */
.exam-button {
    display: inline-block;
    min-height: 44px;
    padding: 10px 18px;
    border: 2px solid var(--color-sign-active-bg);
    border-radius: 4px;
    background: var(--color-sign-bg);
    color: var(--color-sign-text);
    font: inherit;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.exam-button:hover {
    background: var(--color-sign-active-bg);
    text-decoration: underline;
}

/* One question: a box of two equal columns, Russian on the left and Hebrew on the right.
   Its rows: the question, the picture, the four answers, the footer. */
.exam-question {
    min-width: 0;
    margin: 0 0 16px;
    padding: 8px 4px 8px;
    border: 1px solid var(--color-border);
    background: var(--color-law-bg);
}

/* The legend is as wide as the box. It floats, so it sits inside the box and not on its border. */
.exam-question__text {
    box-sizing: border-box;
    float: left;
    width: 100%;
    margin: 0 0 6px;
    padding: 0 8px 8px;
    border-bottom: 1px solid var(--color-line);
    font-weight: bold;
}

.exam-question__text + * {
    clear: both;
}

/* One row of the box. Both halves are one grid row, so the next row starts under the longer half.
   Every row has the same side padding, so the columns of all the rows are in one line. */
.exam-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px 24px;
    align-items: start;
    direction: ltr;
}

.exam-pair__ru,
.exam-pair__he {
    overflow-wrap: anywhere;
}

.exam-pair__he {
    font-size: var(--font-size-hebrew);
    text-align: right;
}

.exam-question__number {
    color: var(--color-text-soft);
}

.exam-question__mark,
.exam-question__image {
    margin-inline: 8px;
}

.exam-question__image {
    display: block;
    max-width: calc(100% - 16px);
    height: auto;
    margin-block: 6px;
    border: 1px solid var(--color-line);
    background: #FFFFFF;
}

.inner__content .exam-answers {
    margin: 6px 0;
    padding: 0;
    list-style: none;
}

/* An answer row: 6px of padding and 2px of border give the same 8px as the question row */
.exam-answers__item {
    padding: 5px 6px;
    border: 2px solid transparent;
}

/* The radio button and the Russian text; the row is at least 24px high */
.exam-answers__choice {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.exam-answers__choice input {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
}

.exam-answers__item label {
    cursor: pointer;
}

/* The last row: the number of the question on the left, the check button on the right */
.exam-question__footer {
    display: flex;
    gap: 8px 24px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 0;
    border-top: 1px solid var(--color-line);
}

.exam-question__source {
    margin: 0;
    color: var(--color-text-soft);
    font-size: var(--font-size-small);
}

/* The check of one question works without JavaScript: the button is a <details> element,
   and :has() reads its state and the chosen radio button. A browser without :has() gets no
   such button; the check of the whole page is still there. */
.exam-reveal,
.exam-reveal__result,
.exam-reveal__msg,
.exam-answers__note--key {
    display: none;
}

/* As high as its text. With the padding it stays above the 24px that a pointer target needs. */
.exam-reveal__button {
    display: block;
    min-height: 0;
    padding: 3px 12px;
    line-height: 1.5;
    white-space: nowrap;
    list-style: none;
}

.exam-question__footer .exam-reveal {
    flex: none;
}

.exam-reveal__button::-webkit-details-marker {
    display: none;
}

.exam-reveal__result {
    margin: 8px 8px 0;
}

.exam-reveal__msg--right {
    color: var(--color-exam-right);
}

.exam-reveal__msg--wrong {
    color: var(--color-exam-wrong);
}

@supports selector(:has(*)) {
    .exam-reveal,
    .exam-question:has(.exam-reveal[open]) .exam-reveal__result {
        display: block;
    }

    /* The correct answer: a light green background, a frame and the words "верный ответ" */
    .exam-question:has(.exam-reveal[open]) .exam-answers__item--key {
        border-color: var(--color-exam-right);
        background: var(--color-exam-right-bg);
    }

    .exam-question:has(.exam-reveal[open]) .exam-answers__note--key,
    .exam-question:has(.exam-answers__item--key input:checked) .exam-reveal__msg--right,
    .exam-question:has(input:checked):not(:has(.exam-answers__item--key input:checked)) .exam-reveal__msg--wrong,
    .exam-question:not(:has(input:checked)) .exam-reveal__msg--none {
        display: inline;
    }
}

/* After the check. Right and wrong are told with words and a sign; the colour and the border only add to them. */
.exam-result {
    margin: 0 0 16px;
    padding: 8px 12px;
    border: 3px solid var(--color-border);
    background: var(--color-note-bg);
}

.exam-result__title {
    margin: 0 0 4px;
    font-size: var(--font-size-title, 1.1rem);
}

.exam-question--right {
    border-inline-start: 6px solid var(--color-exam-right);
}

.exam-question--wrong {
    border-inline-start: 6px double var(--color-exam-wrong);
}

.exam-question__mark {
    margin: 4px 0;
    font-weight: bold;
}

.exam-question__mark--right {
    color: var(--color-exam-right);
}

.exam-question__mark--wrong {
    color: var(--color-exam-wrong);
}

.exam-answers__item--correct {
    background: var(--color-exam-right-bg);
    border: 2px solid var(--color-exam-right);
}

.exam-answers__item--chosen {
    border: 2px dashed var(--color-exam-wrong);
}

.exam-answers__note {
    white-space: nowrap;
}

/* Vehicle info by number
   ========================================================================== */

.carinfo-form {
    margin: 0 0 18px;
}

.carinfo-form__label {
    display: block;
    font-weight: bold;
}

.inner__content .carinfo-form__hint {
    margin: 2px 0 6px;
    color: var(--color-text-soft);
}

.carinfo-form__row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}

.carinfo-form__input {
    box-sizing: border-box;
    width: 15em;
    max-width: 100%;
    min-height: 44px;
    padding: 6px 10px;
    border: 2px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-big);
}

/* A wrong value: a thicker border, and the error text above the field */
.carinfo-form__input[aria-invalid="true"] {
    border-width: 4px;
    border-color: var(--color-exam-wrong);
}

/* An error or a warning. The word "Ошибка" and the bar on the side say it, not only the colour. */
.inner__content .carinfo-error {
    margin: 8px 0;
    padding: 6px 8px;
    border-inline-start: 6px solid var(--color-exam-wrong);
    background: var(--color-law-bg);
}

.carinfo-error strong {
    color: var(--color-exam-wrong);
}

.carinfo-error[hidden] {
    display: none;
}

/* While the page waits, the button looks pressed in. It stays in the keyboard order. */
.exam-button[aria-disabled="true"] {
    opacity: 0.6;
    cursor: progress;
}

/* The loader: a turning ring and a text. Empty when the page is not waiting. */
.carinfo-status:not(:empty) {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    background: var(--color-law-bg);
    font-weight: bold;
}

.carinfo-status__ring {
    flex: none;
    width: 22px;
    height: 22px;
    border: 4px solid var(--color-line);
    border-top-color: var(--color-text);
    border-radius: 50%;
    animation: carinfo-turn 0.9s linear infinite;
}

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

.carinfo-result:focus {
    outline: none;
}

.carinfo-result__title {
    font-size: var(--font-size-title);
}

.carinfo-subtitle {
    margin: 20px 0 6px;
    font-size: var(--font-size-text);
    font-weight: bold;
}

.inner__content .carinfo-toc {
    columns: 2 220px;
}

.carinfo-table {
    width: 100%;
}

/* The values may be long texts, so they wrap */
.carinfo-table td {
    white-space: normal;
    overflow-wrap: anywhere;
}

.carinfo-table--details tbody th {
    width: 45%;
    background: var(--color-law-bg);
}

/* The Hebrew original after a translated value */
.carinfo-original {
    color: var(--color-text-soft);
}

.inner__content .carinfo-note {
    margin: 4px 0 0;
    color: var(--color-text-soft);
    font-size: var(--font-size-small);
}

/* Mobile view: the sandwich menu
   In the mobile view the top menu and the side menu are hidden.
   A sandwich button under the header picture opens the list of the sections.
   ========================================================================== */

.mobile-menu {
    display: none;
}

@media (max-width: 640px) {
    .top-menu,
    .side-menu {
        display: none;
    }

    .mobile-menu {
        display: block;
        border-bottom: 1px solid var(--color-line);
        background: var(--color-side-menu-bg);
        color: var(--color-side-menu-text);
    }

    .mobile-menu__button {
        display: flex;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
        min-height: 48px;
        padding: 8px 12px;
        font-size: var(--font-size-big);
        font-weight: bold;
        cursor: pointer;
        list-style: none;
    }

    .mobile-menu__button::-webkit-details-marker {
        display: none;
    }

    .mobile-menu__button:focus-visible {
        outline: 3px solid var(--color-focus-bg);
        outline-offset: -3px;
    }

    .mobile-menu__icon {
        flex: none;
    }

    /* The open menu: the bars of the button become a cross */
    .mobile-menu[open] .mobile-menu__icon path {
        d: path("M5 5l14 14M19 5L5 19");
    }

    .mobile-menu__nav {
        background: var(--color-surface);
        color: var(--color-text);
    }

    .mobile-menu__list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mobile-menu__link {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        min-height: 48px;
        padding: 8px 14px;
        border-bottom: 1px solid var(--color-row-line);
        color: var(--color-text);
        font-size: var(--font-size-big);
        font-weight: bold;
        text-decoration: none;
    }

    .mobile-menu__link:hover {
        text-decoration: underline;
    }

    /* The current section: another colour and a bar at the start, so colour is not the only sign. */
    .mobile-menu__link--active {
        border-inline-start: 6px solid var(--color-side-menu-active-text);
        background: var(--color-side-menu-active-bg);
        color: var(--color-side-menu-active-text);
    }
}

/* Larger fonts: 150% and 200%
   Every font size is in rem, so the text grows with the root font size.
   Fixed heights and widths that would cut the larger text become flexible.
   ========================================================================== */

html.font-150 {
    font-size: 150%;
}

html.font-200 {
    font-size: 200%;
}

html:is(.font-150, .font-200) .top-menu {
    height: auto;
    min-height: 40px;
}

html:is(.font-150, .font-200) .top-menu__list {
    flex-wrap: wrap;
}

html:is(.font-150, .font-200) .top-menu__item {
    min-height: 39px;
    padding-block: 4px;
}

html:is(.font-150, .font-200) .home__cards {
    width: auto;
    max-width: 960px;
    padding: 0 10px;
}

html:is(.font-150, .font-200) .breadcrumb {
    height: auto;
    min-height: 30px;
    padding: 6px 8px;
    background-size: auto 100%;
    line-height: 1.5;
}

html:is(.font-150, .font-200) .page-title {
    padding-bottom: 2px;
    line-height: 1.3;
}

/* A long word must not run out of a narrow screen */
html:is(.font-150, .font-200) :is(.breadcrumb, .inner__content, .home__title, .card__title, .site-footer) {
    overflow-wrap: anywhere;
}

html:is(.font-150, .font-200) .side-menu {
    width: auto;
    min-width: var(--side-menu-width);
    max-width: 40%;
}

html:is(.font-150, .font-200) .side-menu__item {
    width: auto;
    min-width: 185px;
    height: auto;
    min-height: 26px;
    margin-inline: 1px;
    padding-block: 4px;
    padding-inline-end: 8px;
    line-height: 1.4;
}

html:is(.font-150, .font-200) .inner-footer__text {
    top: 0;
}

/* At 200% the menu goes above the text, as on a phone, to leave room for the text */
html.font-200 .inner {
    flex-direction: column;
    align-items: stretch;
}

html.font-200 .side-menu {
    max-width: none;
    padding: 0 5px 5px;
}

html.font-200 .side-menu__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 5px;
}

html.font-200 .side-menu__list li {
    flex: 1 1 140px;
}

/* On a narrow screen the sign goes to the bottom left, where it covers less text */
@media (max-width: 640px) {
    .display-settings {
        top: auto;
        bottom: 12px;
    }

    .display-settings__menu {
        top: auto;
        bottom: 0;
        max-height: calc(100vh - 24px);
    }
}

@media (max-width: 640px) {
    html:is(.font-150, .font-200) .side-menu {
        max-width: none;
    }

    html:is(.font-150, .font-200) .side-menu__item {
        display: flex;
        align-items: center;
        min-width: 0;
        min-height: 44px;
    }
}

/* Dark view
   ========================================================================== */

html.theme-dark {
    --color-page-bg: #1B1B1B;
    --color-surface: #121212;
    --color-text: #F2F2F2;
    --color-text-soft: #CFCFCF;
    --color-link: #8AB4FF;
    --color-border: #8C8C8C;
    --color-line: #555555;
    --color-top-menu-text: #F2F2F2;
    --color-top-menu-hover: #7FD6E6;
    --color-breadcrumb-link: #FFD98A;
    --color-footer-bg: #1E1E1E;
    --color-footer-border: #666666;
    --color-focus: #FFFFFF;
    --color-note-bg: #4A3B00;
    --color-active-bg: #33413A;
    --color-table-head: #2E2E2E;
    --color-row-line: #444444;
    --color-law-bg: #1C1C1C;
    --color-card-active: #7FD6E6;
    --color-exam-right: #7BD88F;
    --color-exam-right-bg: #173D21;
    --color-exam-wrong: #FF9A92;

    color-scheme: dark;
}

html.theme-dark body {
    background-image: none;
}

html.theme-dark .top-menu {
    background: #2A2A2A;
}

html.theme-dark .breadcrumb {
    background: #2B2410;
}

/* Monochrome view: the whole page in shades of grey
   ========================================================================== */

/* The filter is not put on <html> or <body>: there it would stop the floating sign
   from staying in place when the page is scrolled. */
html.colors-mono .page,
html.colors-mono .display-settings,
html.colors-mono .skip-link {
    filter: grayscale(100%);
}

/* No motion for visitors who asked for reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}