/*
  Design tokens carried over from the legacy site (primary/secondary blue,
  yellow accent) so the new pages read as "the same site" during the
  migration. Layout itself is new: flexbox instead of the old table markup,
  one nav bar instead of four clashing solid-color blocks. Light-only by
  design - the legacy site never had a dark theme.
*/

:root {
    --color-primary: #004f87;
    --color-secondary: #0182c4;
    --color-accent: #f6cd03;

    --color-surface: #ffffff;
    --color-border: #dfe0d9;
    --color-frame-border: #b7b8b3;

    --color-text: #5a5a50;
    --color-text-strong: #1f2a33;
    --color-text-muted: #7a7f85;
    --color-text-on-primary: #ffffff;

    /* Legacy site used "Lucida Sans Unicode" / "Lucida Grande" / Verdana almost
       everywhere; keep one UI stack so the new pages match it. --font-mono stays
       for raw whois output (legacy showed it in a bare <pre>, i.e. monospace). */
    --font-display: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, sans-serif;
    --font-body: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, sans-serif;
    --font-mono: monospace;
    --font-brand: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, sans-serif;

    --content-width: 819px;
    --radius: 3px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--color-surface);
    color: var(--color-text);
    font: 12px/1.6 var(--font-body);
}

/* grows to push .site-footer (its sibling, below) down to the bottom of the
   viewport on short pages, instead of leaving it stranded right under the
   content with empty space beneath it */
.site-frame {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    /* Without an explicit width, this flex item (of body's column flex
       layout) sizes itself shrink-to-fit: the auto left/right margins that
       center it absorb the stretch space instead of filling the cross
       axis, so its rendered width would otherwise follow page content
       (narrow on short pages, up to max-width on long ones) rather than
       staying constant across pages. */
    width: 100%;
    max-width: calc(var(--content-width) + 30px);
    margin: 0 auto;
    padding: 0 15px 15px;
    border-left: 1px solid var(--color-frame-border);
    border-right: 1px solid var(--color-frame-border);
    border-bottom: 1px solid var(--color-frame-border);
    border-radius: 0 0 8px 8px;
}

.site-frame > * {
    width: 100%;
    min-width: 0;
}

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

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

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
}

code, .mono {
    font-family: var(--font-mono);
}

.wrap {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* header */

.site-header__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 0 12px;
    max-width: var(--content-width);
    margin: 0 auto;
}

.site-header__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.site-header__brand img {
    display: block;
}

/* legacy header: two stacked lines (.logo-en / .logo-ru) - English in primary
   blue, localized name in secondary blue */
.site-header__brand-name {
    display: block;
    font-family: "Trebuchet MS", var(--font-brand);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
}

.site-header__brand-line {
    display: block;
    white-space: nowrap;
}

.site-header__brand-line--en {
    color: var(--color-primary);
}

.site-header__brand-line--local {
    color: var(--color-secondary);
}

.site-header__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.lang-switch {
    display: flex;
    gap: 4px;
    font-size: 10px;
    color: #5a5a50;
}

.lang-switch a {
    color: #5a5a50;
    text-decoration: none;
}

.lang-switch a.is-active {
    font-weight: 700;
}

.lang-switch a:hover {
    text-decoration: underline;
}

.header-search {
    display: flex;
    align-items: center;
    gap: 4px;
}

.header-search__input {
    width: 168px;
    padding: 2px 8px;
    border: 1px solid #8f8d82;
    border-radius: var(--radius);
    font-size: 12px;
    font-family: inherit;
}

.header-search__submit {
    display: block;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

/* top navigation - flat colored buttons, right-aligned, like the legacy topmenu-table */

.site-nav {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    max-width: var(--content-width);
    margin: 0 auto;
}

.site-nav__item {
    display: block;
    min-width: 110px;
    padding: 6px 16px;
    line-height: 1.2;
    /* legacy topmenu links were Arial 11px bold (a.white-text), not the UI stack */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
}

.site-nav__item:hover {
    text-decoration: underline;
}

.site-nav__item--domains {
    background: #004f87;
    color: #ffffff;
}

.site-nav__item--registrars {
    background: #0182c4;
    color: #ffffff;
}

.site-nav__item--documents {
    background: #f6cd03;
    color: #004f87;
}

.site-nav__item--about {
    background: #f0f0eb;
    color: #000000;
}

/* submenu - static bar below the main menu, same color as the active section, visible on
   the section's own pages instead of a hover/click dropdown */

.submenu {
    padding: 8px 24px;
    /* same as the main menu: legacy submenu links were also a.white-text (Arial 11px) */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}

.submenu a {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 3px;
}

.submenu a:hover {
    text-decoration: underline;
}

.submenu--domains {
    background: #004f87;
    color: #ffffff;
}

.submenu--registrars {
    background: #0182c4;
    color: #ffffff;
}

.submenu--documents {
    background: #f6cd03;
    color: #004f87;
}

.submenu--about {
    background: #f0f0eb;
    color: #000000;
}

.submenu--domains a,
.submenu--registrars a {
    color: #ffffff;
}

.submenu--documents a {
    color: #004f87;
}

.submenu--about a {
    color: #000000;
}

/* content */

.site-main {
    flex: 1 0 auto;
    padding: 30px 0 40px;
}

/* wider side gutters for content pages; the home grid (.home) stays flush */
.site-main > :not(.home) {
    padding-left: 15px;
    padding-right: 15px;
}

.article h1 {
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.article h2 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-primary);
    margin: 20px 0 6px;
}

.article p {
    margin: 0 0 14px;
    text-indent: 25px;
}

/* pages with short, list-like paragraphs (e.g. contact info) opt out of the indent */
.article--noindent p {
    text-indent: 0;
}

.article a {
    text-decoration: none;
}

.article a:hover {
    color: #9a7500;
    text-decoration: underline;
}

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

/* price pages: article + side nav */

.price-layout {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 40px;
    align-items: start;
}

@media (max-width: 720px) {
    .price-layout {
        grid-template-columns: 1fr;
    }
}

.price-nav {
    background: #f0f0eb;
    border-radius: var(--radius);
    padding: 16px;
}

.price-nav h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.price-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.price-nav a {
    font-size: 12px;
    color: var(--color-text);
    text-decoration: none;
}

.price-nav a:hover {
    color: #9a7500;
    text-decoration: underline;
}

.price-nav a.is-active {
    color: var(--color-primary);
    font-weight: 700;
}

.article .price-nav p {
    text-indent: 0;
}

.article table {
    width: 100%;
    margin: 16px 0;
    border-collapse: collapse;
    font-size: 12px;
}

.table-scroll {
    overflow-x: auto;
}

.table-scroll table {
    width: auto;
    min-width: 100%;
    font-size: 12px;
}

.article .table-scroll th,
.article .table-scroll td {
    white-space: nowrap;
    padding: 3px 6px;
    color: var(--color-primary);
    text-align: center;
}

.article table caption {
    text-align: left;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.article th,
.article td {
    border: 1px solid var(--color-border);
    padding: 8px 10px;
    text-align: left;
}

.article th {
    background: #f0f0eb;
    font-weight: 700;
}

.registrar-list {
    margin: 16px 0;
}

.registrar-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
}

.registrar-item:last-of-type {
    border-bottom: none;
}

.registrar-item__name {
    display: block;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.registrar-item__details {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
}

.registrar-item__zones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.registrar-item__zone {
    display: inline-block;
    padding: 3px 8px;
    background: var(--color-accent);
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 700;
    border-radius: 2px;
}

.article ul {
    margin: 0 0 14px;
    padding-left: 22px;
}

.article ul + ul {
    margin-top: 35px;
}

.article ul li {
    margin-bottom: 8px;
}

.article ul li::marker {
    color: var(--color-primary);
}

.article ul li:hover::marker {
    color: #9a7500;
}

/* faq accordions (domains-faq, registrars-faq) */

.faq-page h2 {
    font-size: 15px;
    text-transform: none;
}

.faq-page details {
    border-bottom: 1px solid var(--color-border);
    padding: 6px 0;
}

.faq-page summary {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    color: var(--color-primary);
    cursor: pointer;
    padding: 4px 0;
}

.faq-page summary::marker {
    color: var(--color-primary);
}

.faq-page summary:hover {
    color: #9a7500;
    text-decoration: underline;
}

.faq-page summary:hover::marker {
    color: #9a7500;
}

.faq-page details p {
    font-family: var(--font-body);
    font-size: 12px;
    margin: 6px 0 4px 4px;
}

.faq-page details[open] p {
    background: #f0f0eb;
    padding: 8px 10px;
    margin: 0;
}

.faq-page details[open] p:first-of-type {
    margin-top: 6px;
    border-radius: 4px 4px 0 0;
}

.faq-page details[open] p:last-of-type {
    margin-bottom: 4px;
    border-radius: 0 0 4px 4px;
}

.faq-page details[open] p:only-of-type {
    border-radius: 4px;
}

/* vacancy listing */

.vacancy-item {
    padding: 18px 0;
    border-bottom: 1px solid var(--color-border);
}

.vacancy-item:first-of-type {
    padding-top: 6px;
}

.vacancy-item:last-of-type {
    border-bottom: none;
}

.vacancy-item h2 {
    font-size: 15px;
    text-transform: none;
    margin-top: 0;
}

/* home page */

.home {
    display: grid;
    grid-template-columns: 1fr 275px;
    gap: 26px;
    align-items: start;
}

@media (max-width: 720px) {
    .home {
        grid-template-columns: 1fr;
    }
}

.home__sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.news {
    background: #f0f0eb;
    border-radius: var(--radius);
    padding: 20px 24px 24px;
    margin-left: 8px;
}

.news h1 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: #5a5a50;
}

.news h1::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    background: url(/images/ugolok.gif) top right no-repeat;
    vertical-align: middle;
}

.news a {
    text-decoration: none;
}

.news a:hover {
    color: #9a7500;
    text-decoration: underline;
}

.news-item {
    position: relative;
    padding-bottom: 20px;
    padding-left: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
}

.news-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 8px;
    height: 10px;
    background: url(/images/ugolsmall.gif) top right no-repeat;
}

.news-item:last-of-type {
    border-bottom: none;
}

.news-item__date {
    font-size: 11px;
    color: #5a5a50;
}

.news-item__title {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #5a5a50;
    margin: 0 0 1px;
}

.news-item__text {
    margin: 0;
    font-size: 11px;
    text-align: justify;
    white-space: pre-line;
}

/* higher specificity than ".article p" so the archive page (which sits
   inside .article) doesn't get a first-line indent on news items */
.news-item .news-item__text {
    text-indent: 0;
}

.news-item__more {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 400;
    text-decoration: none;
}

.news-item__more:hover {
    color: #9a7500;
    text-decoration: underline;
}

.news__archive-link {
    font-size: 11px;
}

/* whois searchbox */

.whois-box {
    background: #f0f0eb;
    border: 1px solid #d7d5c9;
    border-radius: 4px;
    padding: 10px 16px;
}

.whois-box__title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 10px;
    text-transform: uppercase;
    color: #5a5a50;
    margin-bottom: 10px;
}

.whois-box__title::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    background: url(/images/ugolok.gif) top right no-repeat;
    vertical-align: middle;
}

.whois-box__form {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.whois-box__input {
    flex: 1;
    min-width: 0;
    padding: 5px 10px;
    border: 1px solid #8f8d82;
    border-radius: var(--radius);
    font: 11px var(--font-body);
}

.whois-box__submit {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: #ffffff url(/images/whoisbutton.png) center / 16px no-repeat;
    font-size: 0;
    cursor: pointer;
}

.whois-box__submit:hover {
    background-color: #f0f0eb;
}

.whois-box__hint {
    font-size: 10px;
    color: #5a5a50;
    padding-left: 16px;
    background: url(/images/strelkaright.gif) left top no-repeat;
}

/* plain labeled submit button (epay code/pay forms, whois search) - unlike
   .whois-box__submit this is a real button with visible text, no icon, like
   the legacy <input type="submit"> */
.btn-accent {
    display: inline-block;
    padding: 8px 20px;
    border: none;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-primary);
    font: 700 12px var(--font-body);
    cursor: pointer;
}

.btn-accent:hover {
    background: #e0ba00;
}

/* last-10 box */

.last10-box {
    background: var(--color-secondary);
    border-radius: var(--radius);
    padding: 16px 24px;
    color: var(--color-text-on-primary);
}

/* legacy #last-ten-table: Arial 11px, white; title is <strong> (bold) */
.last10-box__title {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 10px;
}

.last10-box__list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}

.last10-box__list li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 0;
}

.last10-box__list a {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-on-primary);
    text-decoration: none;
}

.last10-box__list a:hover {
    color: var(--color-text-on-primary);
    text-decoration: underline;
}

.last10-box__date {
    flex-shrink: 0;
    color: var(--color-text-on-primary);
}

.last10-box__note {
    margin-top: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    opacity: 0.85;
}

/* banners */

.banners {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end;
}

.banners img {
    max-width: 100%;
    display: block;
}

/* footer */

.site-footer {
    padding: 16px 0 0;
    font-size: 11.5px;
    color: #5a5a50;
    max-width: var(--content-width);
    margin: 0 auto;
}

.site-footer__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 20px;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
}

.site-footer__links a {
    color: #5a5a50;
    text-decoration: none;
}

.site-footer__links a:hover {
    color: var(--color-primary);
}

.site-footer__meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.site-footer__meta-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #5a5a50;
    text-decoration: none;
}

.site-footer__meta-link:hover {
    color: var(--color-primary);
}

.site-footer__copy {
    margin: 18px 0 0;
    text-align: center;
    color: #5a5a50;
    font-size: 10px;
}

.site-footer__counter {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}