.abc-sun {
  --abc-text: inherit;
  --abc-muted: currentColor;
  --abc-accent: var(--ast-global-color-0, var(--wp--preset--color--primary, currentColor));
  --abc-border: var(--ast-border-color, var(--wp--preset--color--contrast-3, currentColor));
  --abc-sun-image-max: 215px;
  --abc-fact-icon-mask-height: 26px;
  --abc-location-default: #0788f5;
  --abc-solar-eclipse: #f3a64a;
  --abc-equinox: #56b58b;
  --abc-solstice: #d6a33b;
  --abc-perihelion: #e06b3c;
  --abc-aphelion: #6e8fe8;
  width: 100%;
  max-width: 100%;
  color: var(--abc-text);
  font: inherit;
  line-height: inherit;
}

.abc-sun *,
.abc-sun *::before,
.abc-sun *::after { box-sizing: border-box; }

.abc-sun--dark { --abc-text: #f6f8ff; --abc-muted: #b7c3e8; }
.abc-sun--light { --abc-text: #17213b; --abc-muted: #66708a; }

.abc-sun__card,
.abc-sun--calculator { width: 100%; color: var(--abc-text); background: transparent; }
.abc-sun__loading,
.abc-sun__error { padding: 18px 0; color: var(--abc-muted); background: transparent; }
.abc-sun__error { color: #b32d2e; }

.abc-sun h2,
.abc-sun h3,
.abc-sun p { color: inherit; }

.abc-sun__section-heading,
.abc-sun__calculator-head h2,
.abc-sun__day-links-head h2 {
  font-family: inherit;
  font-size: 1.5em;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: normal;
}

.abc-sun__section-heading { margin: 0 0 4px; }

.abc-sun__hero {
  display: grid;
  grid-template-columns: minmax(160px, 250px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 42px);
  align-items: stretch;
  padding: 28px 0 34px;
}

.abc-sun__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch !important;
  min-width: 0;
  min-height: 100%;
}

.abc-sun__visual img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, var(--abc-sun-image-max));
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(255, 174, 20, .24));
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.abc-sun__visual::after { content: ""; position: absolute; inset: 0; z-index: 1; background: transparent; }

.abc-sun__summary {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: start;
  min-width: 0;
}

.abc-sun__summary h2 {
  margin: 0 0 8px;
  font-family: inherit;
  font-size: 1.5em;
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.abc-sun__patron { margin: 0; color: var(--abc-muted) !important; font-size: 1.06em; }

.abc-sun__location {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  color: var(--abc-muted);
  font-size: .875em;
  font-weight: 650;
}

.abc-sun__location-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--abc-location-default); }
.abc-sun__location-dot--solar-eclipse { background: var(--abc-solar-eclipse); }
.abc-sun__location-dot--spring-equinox,
.abc-sun__location-dot--autumn-equinox { background: var(--abc-equinox); }
.abc-sun__location-dot--summer-solstice,
.abc-sun__location-dot--winter-solstice { background: var(--abc-solstice); }
.abc-sun__location-dot--perihelion { background: var(--abc-perihelion); }
.abc-sun__location-dot--aphelion { background: var(--abc-aphelion); }

/* Под событие всегда зарезервировано место, поэтому строки ниже не прыгают. */
.abc-sun__event-slot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 3.15rem;
  min-height: 3.15rem;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.abc-sun__event-badges { display: flex; align-items: center; flex-wrap: wrap; gap: .24rem; max-width: 100%; max-height: 100%; margin: 0; overflow: hidden; }
.abc-sun__event-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.45rem;
  max-width: 100%;
  padding: .14rem .5rem;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: .76em;
  font-weight: 650;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.abc-sun__event-badge--solar-eclipse { background: var(--abc-solar-eclipse); color: #2b2418; }
.abc-sun__event-badge--spring-equinox,
.abc-sun__event-badge--autumn-equinox { background: var(--abc-equinox); color: #14291f; }
.abc-sun__event-badge--summer-solstice,
.abc-sun__event-badge--winter-solstice { background: var(--abc-solstice); color: #2b2418; }
.abc-sun__event-badge--perihelion { background: var(--abc-perihelion); }
.abc-sun__event-badge--aphelion { background: var(--abc-aphelion); }

.abc-sun__timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 34px); }
.abc-sun__timeline-item { min-width: 0; }
.abc-sun__timeline-item small,
.abc-sun__facts small { display: block; margin-bottom: 5px; color: var(--abc-muted); font-size: .78em; }
.abc-sun__timeline-item strong { display: block; font-size: .92em; font-weight: 700; line-height: 1.42; }

.abc-sun__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 34px; padding: 4px 0 30px; }
.abc-sun__fact {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  color: inherit;
  text-align: center;
  text-decoration: none;
}
.abc-sun__fact > div { min-width: 0; width: 100%; }
.abc-sun__fact-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; color: var(--abc-accent); }
.abc-sun__fact-icon::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask-image: var(--abc-icon-url);
  mask-image: var(--abc-icon-url);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: auto var(--abc-fact-icon-mask-height);
  mask-size: auto var(--abc-fact-icon-mask-height);
}
.abc-sun__fact strong { display: block; font-size: 1em; }
.abc-sun__fact--linked:hover strong,
.abc-sun__fact--linked:focus-visible strong { color: var(--abc-accent); text-decoration: underline; text-underline-offset: .18em; }

.abc-sun__arc {
  --abc-arc-gold: #f7c545;
  --abc-arc-white: #fff;
  position: relative;
  width: min(100%, 700px);
  margin: 38px auto 24px;
  padding: 0 82px;
  color: inherit;
}
.abc-sun__arc svg { display: block; width: 100%; height: auto; overflow: visible; }
.abc-sun__arc-path { fill: none; stroke-width: 1.8; stroke-linecap: round; }
.abc-sun__arc-path--remaining { stroke: var(--abc-arc-white); }
.abc-sun__arc-path--passed { stroke: var(--abc-arc-gold); }
.abc-sun__arc-path--night { stroke-dasharray: 4 7; opacity: .68; }
.abc-sun__arc-horizon { stroke: var(--abc-arc-white); stroke-width: 1.5; opacity: .9; }
.abc-sun__arc-sun { pointer-events: none; }
.abc-sun__arc-sun--above { filter: drop-shadow(0 0 7px rgba(247, 197, 69, .42)); }
.abc-sun__arc-sun--below { filter: drop-shadow(0 0 5px rgba(247, 197, 69, .18)); }
.abc-sun__arc-meta { display: grid; grid-template-columns: 92px minmax(0, 1fr) 92px; align-items: start; gap: 16px; width: 100%; margin-top: 12px; }
.abc-sun__arc-label { min-width: 0; padding-top: 33px; overflow-wrap: normal; word-break: normal; text-align: center; }
.abc-sun__arc-label span { display: block; font-size: .78em; }
.abc-sun__arc-label small { display: block; margin-top: 4px; color: var(--abc-muted); font-size: .7em; white-space: nowrap; }
.abc-sun__arc-edge { display: flex; flex-direction: column; align-items: center; min-width: 0; gap: 3px; overflow-wrap: normal; word-break: normal; text-align: center; }
.abc-sun__arc-edge .abc-sun__fact-icon { width: 30px; height: 30px; flex-basis: 30px; }
.abc-sun__arc-edge span { color: var(--abc-muted); font-size: .72em; }
.abc-sun__arc-edge strong { font-size: .78em; }

.abc-sun__description { padding: 20px 0 8px; }
.abc-sun__description h3,
.abc-sun-details h2 { margin: 0 0 16px; font-family: inherit; font-size: 1.5em; font-weight: 740; line-height: 1.2; }
.abc-sun__description p,
.abc-sun-details p { max-width: 850px; margin: 0 0 15px; }
.abc-sun__symbol,
.abc-sun-details__symbol { font-weight: 700; }
.abc-sun__actions { display: flex; align-items: flex-start; flex-direction: column; gap: 18px; margin-top: 27px; }
.abc-sun__notice { width: 100%; max-width: 850px !important; margin: 0 !important; color: var(--abc-muted) !important; font-size: .76em; }
.abc-sun__action-links { display: flex; align-items: center; justify-content: flex-start; gap: 16px; flex-wrap: wrap; width: 100%; }
.abc-sun__button { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; cursor: pointer; text-decoration: none; white-space: nowrap; }
.abc-sun__text-link { color: var(--abc-accent); font-weight: 700; }
.abc-sun__theme-color-probe { position: fixed !important; left: -10000px !important; top: -10000px !important; width: 1px !important; height: 1px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; visibility: hidden !important; pointer-events: none !important; }

.abc-sun__day-navigation { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; padding: 2px 0 0; }
.abc-sun__day-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 48%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--abc-accent);
  font: inherit;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
}
.abc-sun__day-nav:hover,
.abc-sun__day-nav:focus-visible { text-decoration: underline; text-underline-offset: .2em; }

.abc-sun--calculator { padding: 30px 0; }
.abc-sun__calculator-head { margin-bottom: 24px; }
.abc-sun__calculator-head h2 { margin: 0 0 4px; }
.abc-sun__calculator-head p { margin: 0; color: var(--abc-muted); }
.abc-sun__form { display: grid; grid-template-columns: 1.5fr 1fr .8fr auto; gap: 12px; align-items: end; }
.abc-sun__form label { display: grid; gap: 7px; color: var(--abc-muted); font-size: .82em; font-weight: 650; }
.abc-sun__form input,
.abc-sun__form select { width: 100%; min-height: 48px; font-family: inherit; }
.abc-sun--dark .abc-sun__form select option { color: #17213b; background: #fff; }
.abc-sun__form .abc-sun__button { min-height: 48px; }
.abc-sun__calculator-result { margin-top: 28px; }
.abc-sun__calculator-result:empty { display: none; }

.abc-sun--day-links-block { padding: 8px 0 0; }
.abc-sun__day-links-head h2 { margin: 0 0 16px; color: inherit; }
.abc-sun__day-links-grid { display: grid; gap: 14px; align-items: start; }
.abc-sun__day-links-grid--inline { grid-template-columns: repeat(15, minmax(0, 1fr)); width: min(100%, 760px); }
.abc-sun__day-links-grid--sidebar { grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(100%, 360px); }
.abc-sun__day-links-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 31px;
  padding: 5px 4px;
  border: 1px solid var(--abc-accent);
  border-radius: 2px;
  background: transparent;
  color: var(--abc-text);
  font-size: 1em;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  box-shadow: none;
  transition: transform .12s ease, filter .12s ease, background-color .12s ease, color .12s ease, opacity .12s ease;
}
.abc-sun__day-links-button:hover,
.abc-sun__day-links-button:focus-visible { color: var(--abc-text); text-decoration: none; transform: translateY(-1px); filter: brightness(1.03); }
.abc-sun__day-links-button--active { background: var(--abc-accent); color: #fff !important; }
.abc-sun__day-links-button--active:hover,
.abc-sun__day-links-button--active:focus-visible { color: #fff !important; }
.abc-sun__day-links-button--disabled { opacity: .7; pointer-events: none; }
.abc-sun--day-links-sidebar .abc-sun__day-links-head h2 { margin-bottom: 18px; }

.abc-sun-details { padding: 8px 0; }
.abc-sun-details__text { line-height: inherit; }
.abc-sun-details__text > :first-child { margin-top: 0; }
.abc-sun-details__text > :last-child { margin-bottom: 0; }

@media (max-width: 820px) {
  .abc-sun__hero { grid-template-columns: 1fr; }
  .abc-sun__visual { width: min(100%, var(--abc-sun-image-max)); min-height: 0; margin: 0 auto; align-self: center !important; }
  .abc-sun__timeline { grid-template-columns: 1fr; }
  .abc-sun__event-slot,
  .abc-sun__event-badges { justify-content: flex-start; }
  .abc-sun__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abc-sun__form { grid-template-columns: 1fr 1fr; }
  .abc-sun__form label:first-child { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .abc-sun { overflow-wrap: anywhere; }
  .abc-sun__hero { gap: 18px; padding: 22px 0 28px; }
  .abc-sun__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .abc-sun__form { grid-template-columns: 1fr; }
  .abc-sun__form label:first-child { grid-column: auto; }
  .abc-sun__form .abc-sun__button,
  .abc-sun__action-links,
  .abc-sun__action-links .abc-sun__button { width: 100%; }
  .abc-sun__action-links { align-items: stretch; flex-direction: column; }
  .abc-sun__action-links .abc-sun__button { white-space: normal; }
  .abc-sun__day-navigation { flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
  .abc-sun__day-nav { width: 100%; max-width: 100%; justify-content: center; text-align: center; font-size: .9em; }
  .abc-sun__day-links-grid--inline { grid-template-columns: repeat(10, minmax(0, 1fr)); width: min(100%, 640px); }
  .abc-sun__day-links-grid--sidebar { grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(100%, 340px); }
  .abc-sun__day-links-grid { gap: 10px; }
  .abc-sun__day-links-button { min-height: 29px; font-size: .94em; }
  .abc-sun__arc { margin-top: 30px; padding: 0 4px; }
  .abc-sun__arc-meta { grid-template-columns: minmax(68px, .9fr) minmax(108px, 1.55fr) minmax(68px, .9fr); gap: 6px; margin-top: 8px; }
  .abc-sun__arc-edge .abc-sun__fact-icon { width: 26px; height: 26px; flex-basis: 26px; }
  .abc-sun__arc-edge span { font-size: .66em; }
  .abc-sun__arc-edge strong { font-size: .72em; }
  .abc-sun__arc-label { padding-top: 29px; }
  .abc-sun__arc-label span { font-size: .72em; }
  .abc-sun__arc-label small { font-size: .64em; }
  .abc-sun__arc-label small { white-space: normal; }
}