/* ==========================================================
   HEART OF ESC - SITE "STAGE" LOOK (every public page)

   A mid-tone blue-violet stage behind the whole page, a glass top
   bar (js/site-bar.js) and glass cards - first built for My Top,
   now the whole site. Pages opt in with <body class="mt-page">;
   the admin panel doesn't, so it keeps the white layout.
   ========================================================== */

body.mt-page,
.mt-bar {
  --mt-top: #5468e0;
  --mt-mid: #5b57d6;
  --mt-bot: #7356d4;
  --mt-glass-a: rgba(255, 255, 255, .20);
  --mt-glass-b: rgba(255, 255, 255, .08);
  --mt-line: rgba(255, 255, 255, .28);
  --mt-ink: #fff;
  --mt-ink-soft: #e4e7ff;
  --mt-ink-dim: #c3c9f5;
  --mt-gold: #ffd84d;
  --mt-pink: #ff4fae;
  --mt-green: #3ee0a6;
  --mt-bar-height: 72px;
}


/* ---------- The stage: the whole screen ---------- */

/* Text keeps the site's dark color by default, so everything inside
   white cards stays readable; text sitting on the stage itself is
   turned white below (STAGE TEXT) */
body.mt-page {
  background: var(--mt-mid);
}

/* Fixed layer, so the light beams stay put while the page scrolls
   (background-attachment: fixed is unreliable on phones) */
body.mt-page::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .09) 32%, transparent 36%),
    linear-gradient(75deg, transparent 60%, rgba(255, 255, 255, .07) 62%, transparent 66%),
    linear-gradient(118deg, transparent 8%, rgba(255, 255, 255, .06) 10%, transparent 14%),
    radial-gradient(90% 45% at 50% -6%, rgba(255, 255, 255, .34), transparent 62%),
    linear-gradient(180deg, var(--mt-top), var(--mt-mid) 45%, var(--mt-bot));
}

.mt-stage {
  max-width: 1180px;
  padding-top: 8px;
  padding-bottom: 40px;
  color: var(--mt-ink);
  font-family: Montserrat, Heebo, "Noto Sans Hebrew", Arial, sans-serif;
}

.mt-stage > .empty {
  color: var(--mt-ink-soft);
}

body.mt-page .site-footer {
  margin-top: 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
  background: transparent;
  color: var(--mt-ink-dim);
}


/* ---------- Top bar ---------- */

.mt-bar {
  position: fixed;
  z-index: 990;
  top: 0;
  right: 0;
  left: 0;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  background: rgba(84, 104, 224, .55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  font-family: Montserrat, Heebo, "Noto Sans Hebrew", Arial, sans-serif;
}

.mt-bar-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  height: var(--mt-bar-height);
  /* The search box (the shell's, placed by CSS below) sits at the
     far end of the bar - keep room for it */
  padding-inline: 28px 296px;
}

.mt-brand {
  flex: none;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .06em;
  white-space: nowrap;
}

.mt-brand span {
  color: var(--mt-gold);
}

.mt-nav {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.mt-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--mt-ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.mt-nav-link:hover {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

.mt-nav-link.active {
  background: #fff;
  color: var(--mt-mid);
}

.mt-nav-link:focus-visible,
.mt-brand:focus-visible,
.mt-more-menu a:focus-visible,
.mt-more-menu button:focus-visible {
  outline: 2px solid var(--mt-gold);
  outline-offset: 2px;
}

.mt-more {
  position: relative;
}

.mt-more-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 10px);
  inset-inline-start: 0;
  display: grid;
  gap: 2px;
  width: 250px;
  padding: 8px;
  border: 1px solid #e6e3f2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(40, 30, 120, .28);
  color: #2a2550;
}

.mt-more-menu[hidden] {
  display: none;
}

.mt-more-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 700;
}

.mt-more-menu a span {
  width: 20px;
  text-align: center;
}

.mt-more-menu a:hover {
  background: #f0edfb;
  color: #51409f;
}

.mt-more-languages {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  padding: 10px 6px 4px;
  border-top: 1px solid #efecf5;
}

.mt-more-languages button {
  padding: 5px 9px;
  border: 1px solid #e4e0ec;
  border-radius: 999px;
  background: #fff;
  color: #565160;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.mt-more-languages button.active {
  border-color: #51409f;
  background: #51409f;
  color: #fff;
}

.mt-bar-account {
  flex: none;
}

.mt-bar-account .public-topbar-account {
  margin: 0;
  padding: 0;
}

.mt-bar-account .site-account-signin,
.mt-bar-account .site-account-user {
  border-color: rgba(255, 255, 255, .6);
}


/* ---------- Desktop: the site frame steps aside ---------- */

@media (min-width: 851px) {
  body.mt-page.has-public-sidebar,
  body.mt-page.has-public-sidebar.public-lang-he {
    padding: var(--mt-bar-height) 0 0;
  }

  /* The sidebar column, its links, the white top bar and the right
     rail's poll / links all hide - the search box stays, moved into
     the top bar's far end */
  body.mt-page .public-sidebar {
    width: 0;
    border: 0;
    background: none;
  }

  body.mt-page .public-side-brand,
  body.mt-page .public-side-nav,
  body.mt-page .public-side-bottom,
  body.mt-page .public-topbar,
  body.mt-page .public-side-poll,
  body.mt-page .public-rail-footer-links {
    display: none !important;
  }

  body.mt-page .public-right-rail {
    top: calc(env(safe-area-inset-top, 0px) + (var(--mt-bar-height) - 42px) / 2);
    right: 28px;
    bottom: auto;
    width: 250px;
    border: 0;
    background: none;
    overflow: visible;
  }

  body.mt-page.public-lang-he .public-right-rail {
    right: auto;
    left: 28px;
  }

  body.mt-page .public-right-rail-inner,
  body.mt-page .public-right-rail-search {
    margin: 0;
    padding: 0;
  }

  body.mt-page .public-right-rail-search .global-search-field input {
    border: 1px solid rgba(255, 255, 255, .6) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .92) !important;
  }
}

/* Narrower desktops: tighter bar */
@media (min-width: 851px) and (max-width: 1240px) {
  .mt-bar-inner {
    gap: 12px;
    padding-inline: 18px 236px;
  }

  body.mt-page .public-right-rail {
    width: 200px;
    right: 18px;
  }

  body.mt-page.public-lang-he .public-right-rail {
    left: 18px;
  }

  .mt-brand {
    font-size: 15px;
  }

  .mt-nav-link {
    padding: 8px 9px;
    font-size: 12px;
  }
}

@media (min-width: 851px) and (max-width: 1080px) {
  /* Home is the logo's job here */
  .mt-nav-link[href="/"] {
    display: none;
  }
}


/* ---------- Phones: logo + account; the site menu stays ---------- */

@media (max-width: 850px) {
  body.mt-page {
    --mt-bar-height: 64px;
    padding-top: calc(var(--mt-bar-height) + env(safe-area-inset-top, 0px)) !important;
  }

  .mt-bar-inner {
    justify-content: space-between;
    gap: 10px;
    /* room for the shell's hamburger button */
    padding-inline: 70px 14px;
  }

  .mt-nav {
    display: none;
  }

  .mt-brand {
    font-size: 15px;
  }

  /* Account: just the avatar (or a small "Sign in"), menu drops down */
  .mt-bar-account,
  .mt-bar-account .public-topbar-account {
    position: relative;
  }

  .mt-bar-account .site-account-user,
  .mt-bar-account .site-account-signin {
    width: auto;
    min-height: 40px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 999px;
  }

  .mt-bar-account .site-account-user {
    gap: 0;
    padding: 2px;
    background: rgba(255, 255, 255, .2);
  }

  .mt-bar-account .site-account-signin {
    gap: 6px;
    padding: 0 12px;
    font-size: 13px;
  }

  .mt-bar-account .site-account-avatar {
    width: 34px;
    height: 34px;
  }

  .mt-bar-account .site-account-signin .site-account-g {
    width: 18px;
    height: 18px;
  }

  .mt-bar-account .site-account-text,
  .mt-bar-account .site-account-caret {
    display: none;
  }

  .mt-bar-account .site-account-menu {
    position: absolute;
    z-index: 5;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    width: min(280px, calc(100vw - 28px));
    margin: 0;
    box-shadow: 0 18px 44px rgba(40, 30, 120, .28);
  }

  .mt-brand {
    white-space: nowrap;
  }

  /* The site's hamburger, as a glass button in the bar */
  body.mt-page .public-mobile-menu {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .18);
    color: #fff;
    box-shadow: none;
  }

  body.mt-page.public-menu-open .public-mobile-menu {
    border-color: #e4e0ec;
    background: #fff;
    color: #51409f;
  }
}




/* ==========================================================
   STAGE TEXT - headings and lines that sit right on the stage
   (not inside a white card) turn white / soft white
   ========================================================== */

body.mt-page :is(
  .public-page-heading,
  .page-title,
  .polls-page-heading,
  .news-category-heading,
  .results-section-header,
  .country-top-artists-heading,
  .country-voting-heading,
  .artist-competition-heading,
  .vi-section-head
) :is(h1, h2, h3),
body.mt-page .section > .section-title,
body.mt-page .vi-section > .vi-section-title,
body.mt-page main.container > :is(h1, h2) {
  color: #fff;
}

body.mt-page :is(
  .public-page-heading,
  .page-title,
  .polls-page-heading,
  .country-top-artists-heading,
  .country-voting-heading,
  .artist-competition-heading
) :is(p, .muted, small, span),
body.mt-page main.container > :is(p, .muted, .empty),
body.mt-page #searchPageResults > .empty,
body.mt-page .polls-archive:not(:has(.public-poll-widget)) {
  color: var(--mt-ink-soft);
}

/* Small uppercase kickers above section titles */
body.mt-page .polls-page-heading > span,
body.mt-page .news-category-heading .news-kicker {
  color: var(--mt-gold);
}

body.mt-page .video-channel-link,
body.mt-page .vi-edition h2,
body.mt-page .vi-edition .vi-link {
  color: #fff;
}

body.mt-page .vi-edition .vi-edition-stage {
  color: var(--mt-ink-soft);
}

/* Big page titles in Montserrat, like My Top */
body.mt-page :is(.public-page-heading, .page-title, .polls-page-heading) h1 {
  font-family: Montserrat, Heebo, "Noto Sans Hebrew", Arial, sans-serif;
  font-weight: 900;
  letter-spacing: -.02em;
}


/* ==========================================================
   TABLES ON THE STAGE - white rows (data reads best dark on
   light), header labels in soft white
   ========================================================== */

body.mt-page .rank-table tbody tr {
  background-color: #fff;
}

body.mt-page .rank-table th,
body.mt-page .rank-table th :is(button, span),
body.mt-page .rank-table .year-sort-button,
body.mt-page .rank-table .country-sortable {
  color: var(--mt-ink-soft);
}

body.mt-page .rank-table .country-sortable.is-active,
body.mt-page .rank-table .country-sortable:hover {
  color: #fff;
}


/* ==========================================================
   TWO SURFACES

   Glass (frosted, white text) for light browsing cards: years,
   countries, winners, the home cards.
   Sheets (white paper, dark text) for anything you read: page
   headers of years / countries / songs / artists / news, their
   tables and sections, and song / artist cards with photos.
   ========================================================== */

body.mt-page :is(
  .year-public-card,
  .country-public-card,
  .winner-card,
  .stat-card
) {
  border: 1px solid var(--mt-line);
  background: linear-gradient(120deg, var(--mt-glass-a), var(--mt-glass-b));
  box-shadow: 0 6px 18px rgba(40, 30, 120, .16), inset 0 1px 0 rgba(255, 255, 255, .25);
  color: #fff;
}

body.mt-page :is(.year-public-card, .country-public-card, .winner-card):hover {
  background: linear-gradient(120deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .12));
  box-shadow: 0 10px 24px rgba(40, 30, 120, .22), inset 0 1px 0 rgba(255, 255, 255, .3);
}

body.mt-page :is(.country-public-card) h2,
body.mt-page .winner-card-song :is(a, &),
body.mt-page .stat-card .big-number,
body.mt-page .country-stat-line strong {
  color: #fff;
}

body.mt-page .country-stat-line span,
body.mt-page .winner-card-artist :is(a, &),
body.mt-page .winner-card-country-line a,
body.mt-page .stat-card .muted {
  color: var(--mt-ink-soft);
}

body.mt-page .country-stat-line {
  border-color: rgba(255, 255, 255, .16);
}

body.mt-page .winner-card-year-badge {
  background: var(--mt-gold);
  color: #3a2a00;
}

body.mt-page .winner-card-points {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

body.mt-page .winner-card-photo-wrap {
  background: rgba(255, 255, 255, .12);
}


/* ---------- Years: heart + big year, as on My Top ---------- */

body.mt-page .years-stage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body.mt-page .year-stage-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 0;
  padding: 14px 16px;
  border-radius: 18px;
  color: #fff;
  font-family: Montserrat, Heebo, "Noto Sans Hebrew", Arial, sans-serif;
}

body.mt-page .year-stage-card.is-next {
  border-color: rgba(62, 224, 166, .85);
  box-shadow: 0 0 0 1px rgba(62, 224, 166, .4), 0 0 22px rgba(62, 224, 166, .3);
}

body.mt-page :is(.year-stage-heart, .year-stage-logo) {
  flex: none;
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(30, 20, 90, .3));
}

body.mt-page .year-stage-logo {
  border-radius: 12px;
  background: rgba(255, 255, 255, .9);
  object-fit: contain;
  padding: 4px;
}

body.mt-page .year-stage-heart-empty {
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .7);
  font-size: 34px;
}

body.mt-page .year-stage-text {
  display: grid;
  flex: 1;
  min-width: 0;
}

body.mt-page .year-stage-text strong {
  font-size: 27px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

body.mt-page .year-stage-cancelled {
  color: #ffd0dc;
  font-family: Heebo, "Noto Sans Hebrew", Arial, sans-serif;
  font-size: 12.5px;
}

body.mt-page .year-stage-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--mt-green);
  color: #0f5c43;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* ---------- Sheets ---------- */

body.mt-page {
  --mt-sheet-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 22px 50px rgba(30, 20, 110, .22);
  --mt-sheet-ink: #16235e;
  --mt-sheet-muted: #65708a;
}

/* Page headers keep their light, softly tinted card - lifted off the
   stage with a deeper shadow */
body.mt-page :is(.detail-hero, .song-detail-hero, .artist-profile-hero, .news-hero, .search-hero) {
  border: 0;
  border-radius: 26px;
  box-shadow: var(--mt-sheet-shadow);
}

body.mt-page :is(.detail-hero, .song-detail-hero, .artist-profile-hero) h1 {
  color: var(--mt-sheet-ink);
  font-family: Montserrat, Heebo, "Noto Sans Hebrew", Arial, sans-serif;
  font-weight: 900;
  letter-spacing: -.02em;
}

/* Content sections of the year / country / artist pages: one white
   sheet each, with the title inside */
body.mt-page main:has(> :is(.detail-hero, .artist-profile-hero)) > :is(section.section, .artist-competition-section),
body.mt-page :is(#yearVotingMatrixSlot, #yearWithdrawnSlot) > section {
  margin-bottom: 22px;
  padding: 22px 24px 18px;
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--mt-sheet-shadow);
}

body.mt-page main:has(> :is(.detail-hero, .artist-profile-hero)) > :is(section.section, .artist-competition-section) :is(h2, h3, .section-title),
body.mt-page :is(#yearVotingMatrixSlot, #yearWithdrawnSlot) > section :is(h2, h3) {
  color: var(--mt-sheet-ink);
}

body.mt-page main:has(> :is(.detail-hero, .artist-profile-hero)) > :is(section.section, .artist-competition-section) :is(.muted, .country-top-artists-heading p, .country-voting-heading p, .artist-competition-heading span) {
  color: var(--mt-sheet-muted);
}

/* Tables inside sheets: the original light header labels */
body.mt-page main:has(> .detail-hero) .rank-table th,
body.mt-page main:has(> .detail-hero) .rank-table th :is(button, span),
body.mt-page main:has(> .detail-hero) .rank-table :is(.year-sort-button, .country-sortable) {
  color: var(--mt-sheet-muted);
}

body.mt-page main:has(> .detail-hero) .rank-table .country-sortable:is(.is-active, :hover) {
  color: var(--mt-sheet-ink);
}

/* Song and artist cards with photos: white cards */
body.mt-page :is(.song-public-card, .artist-public-card) {
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(30, 20, 110, .2);
}

body.mt-page :is(.song-public-card, .artist-public-card):hover {
  box-shadow: 0 16px 34px rgba(30, 20, 110, .28);
}


/* ---------- Switches, search boxes ---------- */

body.mt-page .competition-switch {
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--mt-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  box-shadow: none;
}

body.mt-page .competition-switch-button {
  min-width: 0;
  padding: 9px 18px;
  border-radius: 999px;
  background: transparent;
  background-image: none;
  color: var(--mt-ink-soft);
  font-weight: 800;
  box-shadow: none;
}

body.mt-page .competition-switch-button:hover {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  box-shadow: none;
}

body.mt-page .competition-switch-button.active {
  background: #fff;
  background-image: none;
  color: var(--mt-mid);
  box-shadow: 0 4px 12px rgba(40, 30, 130, .2);
}

body.mt-page :is(.public-search-input, .public-list-tools input[type="search"], .public-list-tools input[type="text"]) {
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
}

/* Contest tabs on country pages (on the stage) */
body.mt-page .competition-tabs {
  border: 1px solid var(--mt-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  box-shadow: none;
}

body.mt-page .competition-tab {
  min-width: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--mt-ink-soft);
  font-weight: 800;
  box-shadow: none;
}

body.mt-page .competition-tab:hover {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  box-shadow: none;
}

body.mt-page .competition-tab.active {
  background: #fff;
  background-image: none;
  color: var(--mt-mid);
  box-shadow: 0 4px 12px rgba(40, 30, 130, .2);
}

/* Final / Semi-final tabs - inside the results sheet, so a light
   pill track with a violet active pill */
body.mt-page #yearTableTabs.year-table-tabs {
  border: 0;
  border-radius: 999px;
  background: #eef0fb;
  box-shadow: none;
}

body.mt-page #yearTableTabs .year-table-tab {
  border-radius: 999px;
  background: transparent;
  background-image: none;
  color: #4a4f86;
  font-weight: 800;
  box-shadow: none;
}

body.mt-page #yearTableTabs .year-table-tab:hover {
  background: #fff;
  color: var(--mt-mid);
}

body.mt-page #yearTableTabs .year-table-tab.active {
  background: var(--mt-mid);
  background-image: none;
  color: #fff;
  box-shadow: 0 4px 12px rgba(40, 30, 130, .25);
}

/* Ranked rows (top artists...) sit on white like the tables */
body.mt-page .artist-rank-row {
  background-color: #fff;
}


/* Small phones: the Google "G" alone in the top bar (the button keeps
   its "Sign in with Google" text for screen readers) */
@media (max-width: 440px) {
  .mt-bar-account .site-account-signin {
    width: 40px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }

  .mt-bar-account .site-account-signin .site-account-g {
    width: 20px;
    height: 20px;
  }
}


/* Phones: years two to a row */
@media (max-width: 760px) {
  body.mt-page .years-stage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.mt-page .year-stage-card {
    gap: 10px;
    padding: 12px;
  }

  body.mt-page :is(.year-stage-heart, .year-stage-logo) {
    width: 40px;
    height: 40px;
  }

  body.mt-page .year-stage-text strong {
    font-size: 23px;
  }

  body.mt-page .year-stage-card {
    position: relative;
  }

  body.mt-page .year-stage-pill {
    position: absolute;
    top: 7px;
    inset-inline-end: 8px;
    padding: 2px 7px;
    font-size: 9px;
    line-height: 1.4;
    box-shadow: 0 2px 6px rgba(15, 92, 67, .25);
  }

  body.mt-page main:has(> :is(.detail-hero, .artist-profile-hero)) > :is(section.section, .artist-competition-section),
  body.mt-page :is(#yearVotingMatrixSlot, #yearWithdrawnSlot) > section {
    padding: 16px 14px 12px;
    border-radius: 22px;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  body.mt-page .years-stage-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body.mt-page .country-douze-totals small {
  color: var(--mt-sheet-muted);
}


/* ==========================================================
   HOME - each section on a white sheet; the countdown cards keep
   their deep colours, the latest poll sits beside the news
   ========================================================== */

body.mt-page .new-home > .home-section,
body.mt-page .related-news-section {
  margin-top: 26px;
  padding: 26px 28px 28px;
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--mt-sheet-shadow);
}

body.mt-page .new-home > .hm-promo + .home-section {
  margin-top: 26px;
}

body.mt-page .hm-surprise {
  box-shadow: var(--mt-sheet-shadow);
}

body.mt-page .hm-news-layout.has-poll {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}

body.mt-page .hm-news-main {
  min-width: 0;
}

/* The poll the site shell rendered for its (hidden) right rail */
body.mt-page .hm-poll-slot .public-side-poll {
  display: block !important;
}

body.mt-page .hm-poll-slot .public-side-poll-label {
  margin: 0 2px 10px;
  color: #6b4fd8;
}

body.mt-page .hm-poll-slot .public-poll-widget {
  border: 1px solid #ebe7fb;
  background: linear-gradient(160deg, #faf8ff, #ffffff);
  box-shadow: none;
}

@media (max-width: 900px) {
  body.mt-page .hm-news-layout.has-poll {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  body.mt-page .new-home > .home-section,
  body.mt-page .related-news-section {
    padding: 18px 14px 20px;
    border-radius: 22px;
  }
}

/* Polls page: each poll on a white sheet */
body.mt-page .poll-archive-item .public-poll-widget {
  border: 0;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--mt-sheet-shadow);
  color: var(--mt-sheet-ink);
}


/* ==========================================================
   PHONE MENU (the shell's drawer) - in the stage colours: deep
   violet glass, white links, the current page as a white pill
   ========================================================== */

@media (max-width: 850px) {
  body.mt-page .public-sidebar {
    background:
      radial-gradient(120% 40% at 50% -5%, rgba(255, 255, 255, .22), transparent 60%),
      linear-gradient(180deg, #4f5fd8, #5b4fcf 50%, #6a4bc9);
    color: #fff;
    box-shadow: 12px 0 40px rgba(20, 10, 70, .45);
  }

  body.mt-page.public-lang-he .public-sidebar {
    box-shadow: -12px 0 40px rgba(20, 10, 70, .45);
  }

  /* No logo image - the same "HEART OF ESC" wordmark as the top bar */
  body.mt-page .public-sidebar .public-side-brand {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    background: none;
    color: #fff;
    font-family: Montserrat, Heebo, "Noto Sans Hebrew", Arial, sans-serif;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .06em;
    text-decoration: none;
    white-space: nowrap;
  }

  body.mt-page .public-sidebar .public-side-brand > * {
    display: none;
  }

  body.mt-page .public-sidebar .public-side-brand::before {
    content: "HEART OF\00a0";
  }

  body.mt-page .public-sidebar .public-side-brand::after {
    content: "ESC";
    color: var(--mt-gold);
  }

  /* Links */
  body.mt-page .public-sidebar :is(.public-side-link, .public-topbar-link, .public-rail-footer-link) {
    border-radius: 14px;
    background: transparent;
    color: #eef0ff;
  }

  body.mt-page .public-sidebar :is(.public-side-link, .public-topbar-link, .public-rail-footer-link):hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
  }

  body.mt-page .public-sidebar :is(.public-side-link, .public-topbar-link, .public-rail-footer-link).active {
    background: #fff;
    color: #4b45c4;
    box-shadow: 0 6px 16px rgba(20, 10, 70, .2);
  }

  /* My Top: the gold-edged highlight of the menu */
  body.mt-page .public-sidebar .public-side-link-featured {
    border: 1px solid rgba(255, 216, 77, .7);
    background: linear-gradient(110deg, rgba(255, 79, 174, .85), rgba(140, 90, 255, .85));
    color: #fff;
    box-shadow: 0 8px 20px rgba(20, 10, 70, .3);
  }

  body.mt-page .public-sidebar .public-side-link-featured.active {
    background: linear-gradient(110deg, rgba(255, 79, 174, .95), rgba(140, 90, 255, .95));
    color: #fff;
  }

  /* Dividers */
  body.mt-page .public-sidebar :is(.public-side-links-after-contest, .public-rail-footer-links) {
    border-color: rgba(255, 255, 255, .2);
  }

  /* Search */
  body.mt-page .public-sidebar .global-search-field input {
    border: 1px solid rgba(255, 255, 255, .5) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .95) !important;
  }

  /* Account card */
  body.mt-page .public-sidebar :is(.site-account-user, .site-account-signin) {
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .14);
    color: #fff;
  }

  body.mt-page .public-sidebar .site-account-name {
    color: #fff;
  }

  body.mt-page .public-sidebar .site-account-email {
    color: #d9dcff;
  }

  /* Close button, while the menu is open */
  body.mt-page.public-menu-open .public-mobile-menu {
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .18);
    color: #fff;
  }

  /* Language picker at the bottom */
  body.mt-page .public-sidebar .esc-language-selector-sidebar :is(button, a) {
    color: #fff;
  }
}


/* ==========================================================
   HOME - My Top banner in the stage look: frosted glass with a
   gold trophy tile, the My Top title face and a white pill button
   (instead of the pink-to-cyan rainbow)
   ========================================================== */

body.mt-page .hm-promo {
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 26px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 216, 77, .22), transparent 45%),
    linear-gradient(120deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .1));
  box-shadow: 0 14px 34px rgba(30, 20, 110, .22), inset 0 1px 0 rgba(255, 255, 255, .35);
  font-family: Montserrat, Heebo, "Noto Sans Hebrew", Arial, sans-serif;
}

body.mt-page .hm-promo:hover {
  box-shadow: 0 18px 40px rgba(30, 20, 110, .3), inset 0 1px 0 rgba(255, 255, 255, .4);
}

/* No diagonal stripes; a softer sheen */
body.mt-page .hm-promo::before {
  display: none;
}

body.mt-page .hm-promo::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
}

body.mt-page .hm-promo-badge {
  border: 0;
  background: linear-gradient(145deg, #ffe58a, #f5b82e);
  box-shadow: 0 8px 18px rgba(120, 80, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .6);
}

body.mt-page .hm-promo-text small {
  background: none;
  padding: 0;
  color: var(--mt-gold);
  letter-spacing: .22em;
}

body.mt-page .hm-promo-text strong {
  font-size: 28px;
  letter-spacing: -.01em;
}

body.mt-page .hm-promo-text > span {
  color: var(--mt-ink-soft);
  opacity: 1;
  font-family: Heebo, "Noto Sans Hebrew", Arial, sans-serif;
}

body.mt-page .hm-promo-cta {
  border-radius: 999px;
  padding: 13px 24px;
  color: var(--mt-mid);
  box-shadow: 0 8px 20px rgba(30, 20, 110, .25);
}

body.mt-page .hm-promo-hearts {
  color: #fff;
  opacity: .22;
}



/* ==========================================================
   ADMIN PANEL (<body class="mt-admin">)

   The same glass top bar as the site; the admin pages menu stays
   in the right rail, now a violet panel in the stage colours; the
   working area keeps its light background so forms and tables
   read as before.
   ========================================================== */

body.mt-admin {
  --mt-top: #5468e0;
  --mt-mid: #5b57d6;
  --mt-bot: #7356d4;
  --mt-line: rgba(255, 255, 255, .28);
  --mt-ink-soft: #e4e7ff;
  --mt-gold: #ffd84d;
  --mt-bar-height: 72px;
  --mt-admin-rail: 280px;
}

/* The bar is English (left to right) even on Hebrew admin pages */
body.mt-admin .mt-bar {
  direction: ltr;
}



body.mt-admin .mt-bar .mt-bar-account {
  margin-inline-start: auto;
}

/* Admin menu panel */
body.mt-admin .public-right-rail {
  background:
    radial-gradient(120% 40% at 50% -5%, rgba(255, 255, 255, .2), transparent 60%),
    linear-gradient(180deg, #4f5fd8, #5b4fcf 50%, #6a4bc9);
  border: 0;
  color: #fff;
}

body.mt-admin .public-admin-label {
  color: var(--mt-gold);
  letter-spacing: .14em;
}

body.mt-admin .public-admin-title {
  color: rgba(228, 231, 255, .7);
  letter-spacing: .06em;
}

body.mt-admin .public-admin-link {
  color: #eef0ff;
}

body.mt-admin .public-admin-link:hover {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

body.mt-admin .public-admin-link.active {
  background: #fff;
  color: #4b45c4;
  box-shadow: 0 6px 16px rgba(20, 10, 70, .2);
}

body.mt-admin .public-admin-icon {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

body.mt-admin .public-admin-link.active .public-admin-icon {
  background: var(--mt-mid);
  color: #fff;
}

body.mt-admin .public-rail-footer-links {
  border-color: rgba(255, 255, 255, .2);
}

body.mt-admin .public-rail-footer-link {
  color: #eef0ff;
}

body.mt-admin .public-rail-footer-link:hover {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

@media (min-width: 851px) {
  /* Bar on top, admin menu as a column on the right, below it */
  body.mt-admin.has-public-sidebar {
    padding: var(--mt-bar-height) var(--mt-admin-rail) 0 0;
  }

  body.mt-admin .public-sidebar {
    width: 0;
    border: 0;
    background: none;
  }

  body.mt-admin :is(.public-side-brand, .public-side-nav, .public-side-bottom, .public-topbar) {
    display: none !important;
  }

  body.mt-admin .public-right-rail {
    top: calc(env(safe-area-inset-top, 0px) + var(--mt-bar-height));
    width: var(--mt-admin-rail);
    box-shadow: -10px 0 30px rgba(30, 20, 110, .15);
  }

  body.mt-admin .public-right-rail-inner {
    padding: 22px 18px;
  }
}

/* Phones: the bar with logo and account; the site menu (with the
   admin pages in it) opens from the hamburger, in stage colours */
@media (max-width: 850px) {
  body.mt-admin {
    --mt-bar-height: 64px;
    padding-top: calc(var(--mt-bar-height) + env(safe-area-inset-top, 0px)) !important;
  }

  body.mt-admin .mt-bar-inner {
    justify-content: space-between;
    gap: 10px;
    padding-inline: 70px 14px;
  }

  body.mt-admin .mt-nav {
    display: none;
  }

  body.mt-admin .public-mobile-menu {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .18);
    color: #fff;
    box-shadow: none;
  }

  body.mt-admin .public-sidebar {
    background:
      radial-gradient(120% 40% at 50% -5%, rgba(255, 255, 255, .22), transparent 60%),
      linear-gradient(180deg, #4f5fd8, #5b4fcf 50%, #6a4bc9);
    color: #fff;
  }

  body.mt-admin .public-sidebar :is(.public-side-link, .public-topbar-link) {
    color: #eef0ff;
  }

  body.mt-admin .public-sidebar :is(.public-side-link, .public-topbar-link).active {
    background: #fff;
    color: #4b45c4;
  }

  body.mt-admin .public-sidebar .public-side-brand {
    padding: 4px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .94);
  }

  body.mt-admin .public-sidebar .public-admin-nav,
  body.mt-admin .public-sidebar .public-side-links-after-contest {
    border-color: rgba(255, 255, 255, .2);
  }
}


/* ==========================================================
   NEWS ARTICLE - the whole article on one white sheet
   ========================================================== */

body.mt-page .news-article,
body.mt-page .news-article-page > .news-empty {
  padding: 34px 40px 38px;
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--mt-sheet-shadow);
  color: var(--mt-sheet-ink);
}

body.mt-page .news-article :is(h1, h2, h3) {
  color: var(--mt-sheet-ink);
}

@media (max-width: 760px) {
  body.mt-page .news-article,
  body.mt-page .news-article-page > .news-empty {
    padding: 20px 16px 24px;
    border-radius: 22px;
  }
}

/* Admin pages: the bar is painted exactly like the site's - the
   stage's top colour under the same frosted layer - and beats
   admin.css's old "body > header" gradient and Arial */
body.mt-admin > header.mt-bar,
body.mt-admin header.mt-bar {
  position: fixed !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .2) !important;
  background:
    linear-gradient(rgba(84, 104, 224, .55), rgba(84, 104, 224, .55)),
    radial-gradient(90% 260% at 50% -40%, rgba(255, 255, 255, .34), transparent 62%),
    #5468e0 !important;
  box-shadow: none !important;
  color: #fff !important;
}

body.mt-admin .mt-bar,
body.mt-admin .mt-bar * {
  font-family: Montserrat, Heebo, "Noto Sans Hebrew", Arial, sans-serif !important;
}

body.mt-admin .mt-bar::after {
  display: none !important;
}

body.mt-admin .mt-bar nav {
  background: none;
  padding: 0;
}

@media (min-width: 851px) {
  body.mt-admin .mt-bar nav {
    display: flex;
  }
}

body.mt-admin .mt-bar .mt-nav-link {
  padding: 9px 12px;
  color: var(--mt-ink-soft);
  font-size: 13px;
}

body.mt-admin .mt-bar .mt-nav-link.active {
  color: var(--mt-mid);
}


/* No coloured strip down the side of table rows and list rows - the
   rows' own tint (gold / silver / bronze, white) is enough. The strip
   is drawn with these widths, so zero them everywhere (:root keeps
   this above the html[dir="rtl"] variants) */
:root body.mt-page * {
  --rank-edge-x: 0px;
  --mr-edge-x: 0px;
  --edge-x: 0px;
}


body.mt-admin .mt-bar .mt-brand,
body.mt-admin .mt-bar .mt-brand span {
  font-weight: 900 !important;
}

body.mt-admin .mt-bar .mt-more-button {
  border: 0 !important;
  background: none !important;
  color: var(--mt-ink-soft) !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

body.mt-admin .mt-bar .mt-more-button:hover {
  background: rgba(255, 255, 255, .16) !important;
  color: #fff !important;
}

/* Admin search box at the end of the bar */
body.mt-admin .mt-bar-inner {
  padding-inline-end: 28px;
}

body.mt-admin .mt-bar-search {
  flex: none;
  width: 250px;
}

body.mt-admin .mt-bar-search .global-search {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

body.mt-admin .mt-bar-search .global-search-field input {
  width: 100% !important;
  height: 42px !important;
  padding-inline-start: 34px !important;
  border: 1px solid rgba(255, 255, 255, .6) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .92) !important;
  color: #1f2547 !important;
  font-size: 13px !important;
}

body.mt-admin .mt-bar-search .global-search-results {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  width: 360px !important;
}

@media (max-width: 850px) {
  body.mt-admin .mt-bar-search {
    display: none;
  }
}


/* ==========================================================
   ADMIN ON PHONES - the same bar and the same drawer as the site
   ========================================================== */

@media (max-width: 850px) {
  body.mt-admin .mt-bar .mt-nav {
    display: none !important;
  }

  body.mt-admin .mt-bar .mt-brand {
    font-size: 15px;
  }

  /* Drawer: identical to the public site's (see PHONE MENU) */
  body.mt-admin .public-sidebar {
    box-shadow: 12px 0 40px rgba(20, 10, 70, .45);
  }

  body.mt-admin .public-sidebar :is(.public-side-link, .public-topbar-link, .public-rail-footer-link) {
    border-radius: 14px;
    background: transparent;
    color: #eef0ff;
  }

  body.mt-admin .public-sidebar :is(.public-side-link, .public-topbar-link, .public-rail-footer-link):hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
  }

  body.mt-admin .public-sidebar :is(.public-side-link, .public-topbar-link, .public-rail-footer-link).active {
    background: #fff;
    color: #4b45c4;
    box-shadow: 0 6px 16px rgba(20, 10, 70, .2);
  }

  body.mt-admin .public-sidebar .public-side-link-featured {
    border: 1px solid rgba(255, 216, 77, .7);
    background: linear-gradient(110deg, rgba(255, 79, 174, .85), rgba(140, 90, 255, .85));
    color: #fff;
    box-shadow: 0 8px 20px rgba(20, 10, 70, .3);
  }

  /* Wordmark instead of the logo image */
  body.mt-admin .public-sidebar .public-side-brand {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: #fff;
    font-family: Montserrat, Heebo, "Noto Sans Hebrew", Arial, sans-serif;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .06em;
    white-space: nowrap;
  }

  body.mt-admin .public-sidebar .public-side-brand > * {
    display: none;
  }

  body.mt-admin .public-sidebar .public-side-brand::before {
    content: "HEART OF\00a0";
  }

  body.mt-admin .public-sidebar .public-side-brand::after {
    content: "ESC";
    color: var(--mt-gold);
  }

  body.mt-admin .public-sidebar,
  body.mt-admin .public-sidebar * {
    font-family: Montserrat, Heebo, "Noto Sans Hebrew", Arial, sans-serif;
  }

  body.mt-admin .public-sidebar :is(.public-side-links-after-contest, .public-rail-footer-links, .public-admin-nav) {
    border-color: rgba(255, 255, 255, .2);
  }

  body.mt-admin.public-menu-open .public-mobile-menu {
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .18);
    color: #fff;
  }

  /* Admin pages menu inside the drawer: same look as on desktop */
  body.mt-admin .public-sidebar .public-admin-link {
    color: #eef0ff;
  }

  body.mt-admin .public-sidebar .public-admin-link.active {
    background: #fff;
    color: #4b45c4;
  }

  body.mt-admin .public-sidebar .public-admin-icon {
    background: rgba(255, 255, 255, .16);
    color: #fff;
  }

  body.mt-admin .public-sidebar .public-admin-link.active .public-admin-icon {
    background: var(--mt-mid);
  }

  body.mt-admin .public-sidebar .public-admin-label {
    color: var(--mt-gold);
  }

  body.mt-admin .public-sidebar .public-admin-title {
    color: rgba(228, 231, 255, .7);
  }
}

@media (max-width: 850px) {
  body.mt-admin .public-sidebar .public-side-brand,
  body.mt-admin .public-sidebar .public-side-brand::before,
  body.mt-admin .public-sidebar .public-side-brand::after,
  body.mt-admin .mt-bar .mt-brand,
  body.mt-admin .mt-bar .mt-brand span {
    font-weight: 900 !important;
    font-family: Montserrat, Arial, sans-serif !important;
  }

  body.mt-admin .public-sidebar :is(.public-side-link, .public-topbar-link, .public-admin-link) {
    font-weight: 700;
  }
}


/* ==========================================================
   CONTACT PAGE ON THE STAGE (contact.js) - the "My messages"
   heading, back link and empty notes sit right on the stage;
   status pills keep their own colours inside the page heading
   ========================================================== */

body.mt-page .contact-page :is(.contact-requests h2, .contact-back) {
  color: #fff;
}

body.mt-page .contact-page .empty {
  color: var(--mt-ink-soft);
}

body.mt-page .contact-page .contact-request-row .contact-status,
body.mt-page .contact-page .contact-request-meta .contact-status {
  background: #fff4d6;
  color: #8a5a00;
}

body.mt-page .contact-page .contact-request-row .contact-status-answered,
body.mt-page .contact-page .contact-request-meta .contact-status-answered {
  background: #e3f6ea;
  color: #1e8449;
}

/* "Sent" notice above the thread */
body.mt-page .contact-page > .contact-message {
  max-width: 640px;
  box-sizing: border-box;
  padding: 12px 16px;
  border-radius: 14px;
  background: #fff;
}


/* ---------- Home: About ---------- */

.hm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

body.mt-page .hm-about-intro {
  margin: 0 0 18px;
  color: var(--mt-sheet-muted);
  font-size: 15px;
  line-height: 1.55;
}

body.mt-page .hm-about-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.mt-page .hm-about-list a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  background: #f4f2fd;
  color: var(--mt-sheet-ink);
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}

body.mt-page .hm-about-list a:hover,
body.mt-page .hm-about-list a:focus-visible {
  background: #e9e5fb;
  transform: translateY(-1px);
}

body.mt-page .hm-about-list strong {
  font-size: 15px;
  font-weight: 800;
}

body.mt-page .hm-about-list span {
  color: var(--mt-sheet-muted);
  font-size: 13.5px;
  line-height: 1.45;
}