/* Celestial Romance 2.4.0, based on the approved v1.12.0 visual reference.
   Separate theme for the complete 2.3.0 application. */
:root {
  --hp-pink: #a83b70;
  --hp-link: #176f89;
  --hp-night: #111433;
  --hp-violet: #352250;
  --hp-gold: #e9cd91;
  --hp-paper: #fffcfb;
  --hp-dark: #4d2c51;
}
html, body { background:#f7f5f9; }
#main { background:#fff; }

/* The artwork spans the whole browser; the content below retains its width. */
#top.hp-header {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:254px minmax(52px,auto);
  gap:0;
  min-height:306px;
  width:100%;
  padding:0;
  margin:0;
  background:transparent;
  overflow:visible;
  position:relative;
  isolation:isolate;
}
#top.hp-header::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 calc((992px - 100vw)/2);
  pointer-events:none;
  background:
    radial-gradient(circle at 6% 19%, #ffdf9959 0 1px, transparent 2px),
    radial-gradient(circle at 23% 71%, #fff1cf99 0 1px, transparent 2px),
    radial-gradient(circle at 45% 12%, #f6d8a37a 0 1.5px, transparent 3px),
    radial-gradient(circle at 72% 35%, #ead69b80 0 1px, transparent 3px),
    radial-gradient(circle at 91% 17%, #fff1c5b8 0 1px, transparent 2px),
    url("../img/header-stars-celestial.svg?v=2.4.0") center top / auto 330px no-repeat,
    radial-gradient(ellipse at 77% 5%, #6c3e737a, transparent 53%),
    linear-gradient(117deg,#10122c 0%,#222146 48%,#362049 73%,#171634 100%);
  box-shadow:inset 0 -17px 28px #07091b70;
}
#top.hp-header::after {
  content:"";
  position:absolute;
  z-index:0;
  top:-9px;
  right:-15px;
  width:590px;
  height:280px;
  pointer-events:none;
  background:url("../img/horoscope-muse.webp") right top / contain no-repeat;
  opacity:.97;
  filter:drop-shadow(0 9px 18px #090b2450);
}
#top #logo-odkaz {
  display:block;
  position:relative;
  z-index:2;
  grid-column:1;
  grid-row:1;
  align-self:start;
  width:min(530px,58%);
  max-width:none;
  height:157px;
  margin:19px 0 0 6px;
  padding:0;
  background:none;
}
#top #logo-odkaz img { display:block; width:100%; height:100%; object-fit:contain; }
#top #h1right.hp-tagline {
  position:absolute;
  z-index:2;
  top:154px;
  left:77px;
  right:auto;
  width:auto;
  grid-column:auto;
  grid-row:auto;
  margin:0;
  padding:0;
  color:#f5dfb6;
  text-align:left;
  font:italic 18px/1.5 Georgia,"Times New Roman",serif;
  text-shadow:0 2px 9px #0b0c25;
}
#top .hp-header-moon {
  position:absolute;
  z-index:3;
  left:60px;
  top:184px;
  bottom:auto;
  display:flex;
  grid-column:auto;
  grid-row:auto;
  width:auto;
  margin:0;
  padding:5px 14px 5px 8px;
  gap:9px;
  border:1px solid #f5dc9e70;
  border-radius:30px;
  background:#10142cba;
  color:#fff1cf;
  backdrop-filter:blur(5px);
  text-decoration:none;
}
#top .hp-header-moon b { color:#fff7e1; }
#top .hp-header-moon small { color:#e5dbda; }
#top .hp-header-account {
  position:absolute;
  z-index:5;
  grid-column:auto;
  grid-row:auto;
  top:18px;
  right:6px;
  margin:0;
  padding:7px 12px;
  border:1px solid #f6e2b17a;
  border-radius:28px;
  background:#141732b3;
  color:#fff0ce;
  line-height:1.4;
  text-decoration:none;
}
#top .hp-header-account:hover { background:#594066; color:#fff; }
#top .hp-navigation {
  grid-column:1;
  grid-row:2;
  align-self:end;
  z-index:5;
  position:relative;
  width:100%;
  padding:0;
  margin:0;
  border-top:1px solid #ead29980;
  border-bottom:1px solid #ead29980;
  background:linear-gradient(90deg,#161638e8,#252044e8 60%,#3c2750df);
  box-shadow:0 6px 13px #10102821;
}
#top .hp-menu { justify-content:center; gap:0; }
#top .hp-menu-link, #top .hp-nav-item>summary {
  color:#f4e6c6;
  font-size:14px;
  font-weight:600;
  min-height:52px;
  padding:14px 15px;
  letter-spacing:.01em;
}
#top .hp-menu-link:hover, #top .hp-menu-link[aria-current],
#top .hp-nav-item[open]>summary, #top .hp-nav-item>summary:hover {
  background:#b17f4d45;
  color:#fffdf4;
}
#top .hp-submenu { border-top:3px solid #d9b879; background:#fffdfb; box-shadow:0 12px 25px #13132e42; }
#top .hp-submenu h2 a, #top .hp-submenu .hp-submenu-bottom { color:#84375f; }
#top .hp-submenu a:hover, #top .hp-submenu a:focus-visible { background:#f2f0f8; color:#136e89; }

/* Preserve the familiar light reading area, with celestial accents. */
#middle .hp-year-promo .obalnadpis,
#middle .obalnadpis { background:linear-gradient(90deg,#f7f1f8,#f3f7fb); border-left:4px solid #d4b379; }
#middle h1, #middle h2, #middle h3, #middle h4,
#middle h1 a, #middle h2 a, #middle h3 a { color:#883361; }
#middle h1.hp-page-title, #middle h1.hp-legacy-title,
#middle .hp-year-promo h1, #middle #stred h1 { font-family:Georgia,"Times New Roman",serif; }
#middle a, #right a, #foot a { color:#176f89; }
#middle #dailyhoroskop .hp-date-ribbon {
  background:linear-gradient(100deg,#f6fbff,#fff9ef);
  color:#4e355e!important;
  border:1px solid #e4d5be;
  border-left:4px solid #c4a369;
  border-radius:8px;
  box-shadow:0 3px 10px #32315b0b;
}
#middle #dailyhoroskop .hp-date-ribbon:hover { background:#fff8ea; }
#middle #dailyhoroskop .hp-date-ribbon-link { color:#8b3b67; }
#znameni .obalznameni, #znameni .obalznameni2 {
  min-height:82px;
  border:1px solid #dcc99a75;
  border-radius:12px;
  padding:12px 10px;
  background:linear-gradient(135deg,#fffdfb,#f9f6fc);
  transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease;
}
#znameni .obalznameni:hover, #znameni .obalznameni2:hover {
  border-color:#c4a369;
  box-shadow:0 7px 17px #5d3d5b1c;
  transform:translateY(-1px);
}
#znameni .obalznameni img.hp-zodiac-icon, #znameni .obalznameni2 img.hp-zodiac-icon {
  border-radius:50%;
  box-shadow:0 0 0 1px #dfbe7c7d;
}
#znameni a, #znamenic a, #middle h1 a, #middle h2 a, #middle h3 a { color:#923a6c!important; }
#middle .button, #znamenivyber .button, #middle .hp-primary-button { background:#963d70; border-radius:7px; }
#middle .button:hover, #znamenivyber .button:hover, #middle .hp-primary-button:hover { background:#742552; }
#right h3, #znamenivyber h3 { color:#8b3f69; border-color:#d7bc87; }
#right { background:#fff; }

@media (max-width:1040px) {
  #top.hp-header { grid-template-columns:minmax(0,1fr); grid-template-rows:240px minmax(52px,auto); min-height:292px; }
  #top.hp-header::before { inset:0 -24px; }
  #top.hp-header::after { width:490px; height:246px; right:-10px; }
  #top #logo-odkaz { width:min(505px,60%); height:147px; }
  #top #h1right.hp-tagline { grid-column:auto; grid-row:auto; top:148px; left:75px; font-size:16px; }
  #top .hp-header-moon { grid-column:auto; grid-row:auto; left:44px; top:180px; bottom:auto; }
  #top .hp-navigation { grid-row:2; }
  #top .hp-header-account { grid-column:auto; grid-row:auto; }
}
@media (max-width:860px) {
  #top.hp-header { width:100%; margin:0; grid-template-columns:minmax(0,1fr); grid-template-rows:215px auto; min-height:0; padding:0; gap:0; }
  #top.hp-header::before { inset:0 -24px; }
  #top.hp-header::after { width:370px; height:225px; opacity:.73; right:-16px; top:0; }
  #top #logo-odkaz { width:min(430px,67%); height:130px; margin:10px 0 0 0; }
  #top #h1right.hp-tagline { top:128px; left:43px; font-size:15px; }
  #top .hp-header-moon { left:20px; top:156px; bottom:auto; }
  #top .hp-header-moon .hp-moon-disc { width:34px; height:34px; }
  #top .hp-navigation { grid-column:1; grid-row:2; padding:0; }
  #top .hp-menu { flex-direction:column; justify-content:flex-start; }
  #top .hp-navigation .hp-menu-toggle { color:#f9e9c3; }
  #top .hp-menu-link, #top .hp-nav-item>summary { min-height:44px; font-size:14px; padding:11px 12px; }
}
@media (max-width:560px) {
  #top.hp-header { grid-template-columns:minmax(0,1fr); grid-template-rows:189px auto; }
  #top.hp-header::before { inset:0 -12px; }
  #top.hp-header::after { width:272px; height:195px; right:-17px; top:5px; opacity:.52; }
  #top #logo-odkaz { width:min(334px,80%); height:104px; margin:6px 0 0 -11px; }
  #top #h1right.hp-tagline { top:102px; left:24px; max-width:70%; font-size:13px; }
  #top .hp-header-moon { top:133px; bottom:auto; left:4px; padding:4px 9px 4px 5px; gap:5px; }
  #top .hp-header-moon .hp-moon-disc { width:27px; height:27px; }
  #top .hp-header-moon b { font-size:10px; }
  #top .hp-header-moon small { font-size:9px; }
  #top .hp-header-account { top:9px; right:3px; font-size:11px; padding:5px 7px; }
  #top .hp-navigation { grid-row:2; }
  #top .hp-navigation .hp-menu-toggle { min-height:45px; }
  #znameni .obalznameni, #znameni .obalznameni2 { padding:8px 5px; min-height:100px; }
  #znameni .obalznameni img.hp-zodiac-icon, #znameni .obalznameni2 img.hp-zodiac-icon { box-shadow:none; }
}
@media (prefers-reduced-motion:reduce) {
  #znameni .obalznameni, #znameni .obalznameni2 { transition:none; }
}
@media print {
  #top.hp-header { min-height:0; grid-template-rows:auto; }
  #top.hp-header::before, #top.hp-header::after { display:none; }
  #top #logo-odkaz { background:none; height:auto; }
  #top #logo-odkaz svg { opacity:1; }
  #top #logo-odkaz img { width:240px; height:auto; }
  #top .hp-header-moon, #top .hp-header-account { display:none; }
}

/* Carry the same accents through the newer services and calculated reading. */
#middle .hp-primary-button, #middle .hp-home-dream-fields button { border-color:#963d70; }
#middle .hp-primary-button:hover, #middle .hp-home-dream-fields button:hover { border-color:#742552; }
#middle .hp-home-dream-fields button { background:#963d70; }
#middle .hp-home-dream-search { border-color:#e1d7e6; background:linear-gradient(115deg,#fbf7fc,#fffaf3); }
#middle .hp-home-dream-heading > span { color:#aa8450; }
#middle #stred .hp-natal-report h2, #middle #stred .hp-natal-report h3 { color:#883361; }
#middle .hp-natal-report .hp-big-three strong { color:#8e3b66; }
#middle .hp-natal-report .hp-reading-ruler { border-left-color:#bc9459; background:#fffbf7; }
#middle .hp-natal-report .hp-reading-nav a { border-color:#dfd5e3; }
#middle .hp-natal-report .hp-reading-nav a:hover { background:#f6f0f8; }
#middle #stred.hp-x h2 { color:#883361; }
#middle #stred.hp-x h3 { color:#4f6179; }