/* ==========================================================================
   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: #248DA0;
    --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;

    --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);
}

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

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);
}

.home__title {
    margin: 17px 0 18px;
    color: var(--color-top-menu-text);
    font-size: var(--font-size-big);
    font-weight: bold;
    line-height: normal;
    text-align: center;
}

.home__columns {
    display: flex;
    justify-content: space-between;
    width: 960px;
    margin: 0 auto 18px;
}

.home__left {
    width: 690px;
}

.home__right {
    width: 250px;
}

/* 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;
    background: url("../images/button_bg.jpg") no-repeat;
    color: var(--color-side-menu-text);
    font-weight: bold;
    line-height: 26px;
    text-decoration: none;
}

.side-menu__item--active {
    background-image: url("../images/button_bg2.jpg");
    color: var(--color-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;
}

.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__columns {
        width: auto;
        max-width: 960px;
        padding: 0 10px;
    }

    .home__left {
        flex: 1;
        width: auto;
    }

    .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__columns {
        flex-direction: column;
    }

    .home__left,
    .home__right {
        width: auto;
    }

    .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 {
        flex: 1 1 140px;
    }

    .side-menu__item {
        width: auto;
        height: 44px;
        background-size: 100% 100%;
        line-height: 44px;
    }

    .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;
    }}