/* Tarot title banners: presentation only. Existing form and dialog behavior is retained. */
body #page-title,
body .modal-header:has(> h1),
body .modal-header:has(> .modal-title),
body h1.ui.header.page-title,
.reader-help-wrap > h1,
.reader-help-wrap .reader-section > h2 {
  color: #fff4d6;
  background: linear-gradient(100deg,rgba(8,16,12,.25),rgba(8,16,12,.55) 50%,rgba(8,16,12,.25)),var(--tarot-title-art, url('/templates/ai_tarotandastrology_flat/english/images/title-bars-20260923/tarot-cards.jpg')) center / cover no-repeat;
  text-shadow: 0 2px 4px #000;
  border: 1px solid #806936;
  border-radius: 1rem;
  padding: clamp(.85rem,2vw,1.25rem);
  overflow-wrap: anywhere;
}
body #page-title h1,
body .modal-header > h1,
body .modal-header > .modal-title { color: #fff4d6; margin-bottom: 0; }
body .modal-header:has(> h1),
body .modal-header:has(> .modal-title) { border-radius: 1rem 1rem 0 0; }
.reader-help-shortcuts { display:flex; flex-wrap:wrap; gap:.75rem; margin:1rem 0; }
.reader-help-shortcuts a { max-width:100%; }
@media(max-width:767px) {
  body #page-title, body h1.ui.header.page-title,
  .reader-help-wrap > h1, .reader-help-wrap .reader-section > h2 { border-radius:.75rem; }
}

/* Coordinated artwork by title context, with no navigation or form changes. */
body .modal-header:has(> h1),
body .modal-header:has(> .modal-title),
.reader-help-wrap .reader-section:nth-of-type(3n) > h2 {
  --tarot-title-art: url('/templates/ai_tarotandastrology_flat/english/images/title-bars-20260923/moon-constellations.jpg');
}
body h1.ui.header.page-title,
body:has(.recaptcha-webmaster) .modal-header,
.reader-help-wrap .reader-section:nth-of-type(3n + 2) > h2 {
  --tarot-title-art: url('/templates/ai_tarotandastrology_flat/english/images/title-bars-20260923/zodiac-wheel.jpg');
}
body:has(.recaptcha-performer) .modal-header {
  --tarot-title-art: url('/templates/ai_tarotandastrology_flat/english/images/title-bars-20260923/tarot-cards.jpg');
}
/* Visible right-hand arrows on all collapsed native dropdowns. 2026-10-05. */
select:not([multiple]):not([size]),
select:not([multiple])[size="0"],
select:not([multiple])[size="1"] {
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
  appearance: auto !important;
  background-image: none !important;
}

/* Keep account form cards and their title bars aligned across roles. */
body .page-content .ui.container:has(> :is(.container-login_form, .container-join_form, .container-forgot_password)) > h1.ui.header.page-title {
  width: 760px !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}
body .page-content .ui.container > :is(.container-login_form, .container-join_form, .container-forgot_password) {
  width: 760px !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}
body .page-content .ui.container > :is(.container-login_form, .container-join_form, .container-forgot_password) > form {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Celestial backdrop on the site's dark page shells; content panels stay opaque. */
@media (min-width: 768px) {
  body.theme-black #wrapper,
  body .page-content {
    background-image: linear-gradient(rgba(9, 23, 19, .32), rgba(9, 23, 19, .32)), url('/templates/ai_tarotandastrology_flat/english/images/starfield-background-20261008.webp') !important;
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
  }
}

/* Match editorial title bars to the centered content panels below. */
@media (min-width: 1200px) {
  body.theme-black main.container:has(> #page-title + .col-xl-10.offset-xl-1) > #page-title {
    width: 83.333333% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }
}

/* Header wordmark without tagline on the TarotAndAstrology domain. */
.navbar-brand.logo-link-img:has(> img[src*="/domains/3/site-logo-image/"]),
.img-logo a:has(> img[src*="/domains/3/site-logo-image/"]) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  width: auto !important;
  max-width: 100%;
  white-space: nowrap;
  text-decoration: none !important;
}
.navbar-brand.logo-link-img:has(> img[src*="/domains/3/site-logo-image/"]) > img,
.img-logo a:has(> img[src*="/domains/3/site-logo-image/"]) > img {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.navbar-brand.logo-link-img:has(> img[src*="/domains/3/site-logo-image/"])::before,
.img-logo a:has(> img[src*="/domains/3/site-logo-image/"])::before {
  content: "";
  display: block;
  flex: none;
  width: 42px;
  height: 42px;
  background: url('/templates/ai_tarotandastrology_flat/english/images/tarot-favicon-2026.svg') center / contain no-repeat;
}
.navbar-brand.logo-link-img:has(> img[src*="/domains/3/site-logo-image/"])::after,
.img-logo a:has(> img[src*="/domains/3/site-logo-image/"])::after {
  content: "TarotAndAstrology.com";
  display: block;
  color: #f9efcf;
  font: 700 24px/1.1 Arial, sans-serif;
  letter-spacing: -.6px;
}
.img-logo a:has(> img[src*="/domains/3/site-logo-image/"])::before { width: 32px; height: 32px; }
.img-logo a:has(> img[src*="/domains/3/site-logo-image/"])::after { font-size: 20px; }
@media (max-width: 700px) {
  .navbar-brand.logo-link-img:has(> img[src*="/domains/3/site-logo-image/"])::before { width: 32px; height: 32px; }
  .navbar-brand.logo-link-img:has(> img[src*="/domains/3/site-logo-image/"])::after { font-size: 18px; letter-spacing: -.4px; }
}

/* Larger footer brand so the built-in tagline reads at body-text size. */
#footer .footer-logo img[src*="/domains/3/site-logo-image/"] {
  width: 600px !important;
  max-width: 100% !important;
  height: auto !important;
}
@media (min-width: 1500px) {
  #footer.site-footer:has(.footer-logo img[src*="/domains/3/site-logo-image/"]) {
    grid-template-columns: minmax(0, 616px) minmax(0, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1499px) {
  #footer.site-footer:has(.footer-logo img[src*="/domains/3/site-logo-image/"]) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "footer-logo-socnet" "footer-menu" "footer-disclaimer" "footer-copyright";
  }
}