/*
  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.
*/

/* PT Sans, self-hosted: chosen to replace "Lucida Sans Unicode" because that
   system font has no real bold face on Windows (Chrome fakes it by fattening
   the regular glyphs, which shimmers/moires at small sizes - see git history).
   PT Sans ships true 400/700 weights and was designed for full Cyrillic
   coverage including the extra Kazakh letters (Ә Ғ Қ Ң Ө Ұ Ү Һ І), so all
   three site languages render consistently across browsers without relying on
   whatever font a given OS happens to substitute. */
@font-face {
    font-family: "PT Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/ptsans/pt-sans-400-cyrillic-ext.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: "PT Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/ptsans/pt-sans-400-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "PT Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/ptsans/pt-sans-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "PT Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/ptsans/pt-sans-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "PT Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/ptsans/pt-sans-700-cyrillic-ext.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: "PT Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/ptsans/pt-sans-700-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "PT Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/ptsans/pt-sans-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "PT Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/ptsans/pt-sans-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

: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; self-hosted PT Sans (see @font-face above) now leads the
       stack so bold text renders identically across browsers instead of
       relying on whichever system font a given OS/browser substitutes for
       Lucida's missing bold face. The old system fonts stay as the fallback
       if the webfont fails to load. --font-mono stays for raw whois output
       (legacy showed it in a bare <pre>, i.e. monospace). */
    --font-display: "PT Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, sans-serif;
    --font-body: "PT Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, sans-serif;
    --font-mono: monospace;
    --font-brand: "PT Sans", "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;
    /* PT Sans renders ~13-16% narrower/shorter than Lucida Sans Unicode at the
       same px value (measured via canvas text metrics), so this base size is
       bumped up from 13px to compensate. */
    font-size: 15px;
}

/* 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: 15px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.article h2 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    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: 15px;
    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: 15px;
    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: 15px;
}

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

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

.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: 15px;
    line-height: 1.6;
}

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

.registrar-item__zone {
    display: inline-block;
    background: #f0f0eb;
    border-radius: var(--radius);
    padding: 2px 8px;
    color: var(--color-primary);
    font-size: 13px;
}

.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: 18px;
    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: 15px;
    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: 15px;
    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: 18px;
    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: 14px;
    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: 14px;
    color: #5a5a50;
}

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

.news-item__text {
    margin: 0;
    font-size: 14px;
    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: 14px;
    font-weight: 400;
    text-decoration: none;
}

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

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

/* 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: 13px;
    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: 14px 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: 13px;
    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 15px 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: 12px;
    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: 12px;
}

.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: 12px;
    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;
}

/* mobile: content text sized up further - small viewports are read closer up
   but at arm's length/thumb-scroll speed, so the desktop content size (already
   bumped once for the PT Sans swap, see above) still reads small. Header/nav/
   footer are untouched, same as the desktop-only content sizing above. */
@media (max-width: 720px) {
    .site-main {
        font-size: 17px;
    }

    .article h1,
    .article h2,
    .price-nav h2,
    .price-nav a,
    .article table,
    .table-scroll table,
    .registrar-item__details,
    .faq-page summary,
    .faq-page details p,
    .btn-accent {
        font-size: 17px;
    }

    .registrar-item__zone,
    .whois-box__title,
    .whois-box__hint {
        font-size: 15px;
    }

    .whois-box__input {
        font-size: 16px;
    }

    .faq-page h2,
    .vacancy-item h2 {
        font-size: 20px;
    }

    .news h1,
    .news-item__date,
    .news-item__title,
    .news-item__text,
    .news-item__more,
    .news__archive-link {
        font-size: 16px;
    }
}