/* ==========================================================================
   CardAstrology — brand design layer
   --------------------------------------------------------------------------
   Loaded AFTER new-style.css and cards.css, so it restyles the whole site
   without those files having to be rewritten. Colour tokens come from
   includes/theme.php via head_styles.php.

   The palette is the logo, and only the logo:

     --secondary / --accent   #00ADEF   the cyan swoosh
     --primary                #29457D   the navy inner "C"
     --canvas                 #FFFFFF   the ground it sits on

   The bright cyan is a FILL. It is never used as a text colour on white
   (2.5:1) — text that needs to read as cyan uses --accent-deep (#046C96,
   4.9:1), and cyan fills carry navy text (6.0:1), which is how the mark
   itself is built.

   Root font-size is 62.5%, so 1rem = 10px.
   ========================================================================== */

/* ------------------------------------------------------------- 1. canvas */

/* ── Typefaces ──────────────────────────────────────────────────────────
   Two names, used everywhere. To change either face later, change it here
   and nowhere else:
       --font-body   the whole site
       --font-head   headings, and anything carrying .head-font
   ─────────────────────────────────────────────────────────────────────── */
:root {
  --font-body: "Roboto", sans-serif;
  --font-head: "Roboto Slab", serif;
}

html { background: var(--canvas); font-family: var(--font-body); }

/* Everything inherits the body face... */
body,
button, input, select, textarea, optgroup { font-family: var(--font-body); }

/* ...except headings and anything marked as a heading, which take the slab.
   .head-font is the handle: put it on any element that should read as a
   heading without being one. */
h1, h2, h3, h4, h5, h6,
.head-font { font-family: var(--font-head); }

/* The menu reads as headings too. */
.header-div .navigation_bar .main-menu .nav-item > a,
.header-div .navigation_bar .main-menu .dropdown-menu .dropdown-item,
.nav-link,
.dropdown-item { font-family: var(--font-head); }

body {
  background: var(--canvas);
  color: var(--text);
  
  position: relative;
}

/* The dark theme floated a starfield over the page. On white the equivalent
   is a barely-there brand wash pinned to the top of the document, so the
   canvas is not a flat sheet without ever becoming a coloured background. */
body::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 90rem;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70rem 40rem at 88% -6%, var(--accent-soft), transparent 62%),
    radial-gradient(60rem 34rem at 4% 12%, var(--brand-soft), transparent 60%);
}

/* Everything real sits above that wash.

   Giving every direct child the same z-index makes them siblings in one
   stacking context, so a later section would paint over the header and clip
   its open dropdowns — the topbar and header therefore sit higher. */
body > * { position: relative; z-index: 1; }
body > .topbar { z-index: 90; }
body > #site-header { z-index: 100; }

/* and the menu itself above anything inside the header */
.header-div .navigation_bar .main-menu .dropdown-menu { z-index: 1001; }

/* ---------------------------------------------------- 2. typography scale */

h1, h2, h3, h4, h5, h6,
.section-heading h2,
.cr-panel-title,
.cr-hero-title {
  color: var(--heading);
}

/* Display face for the big statements only — body copy stays in Inter */
.cr-hero-title,
.section-heading h2,
.cr-display {
  
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
}

.section-heading { margin-bottom: 5.5rem; }
.section-heading h2 {
  font-size: 4.6rem;
  line-height: 1.15;
}
.section-heading h2 span {
  font-family: inherit;
  font-size: inherit;
  color: var(--accent-deep);
  font-style: italic;
}
/* the old theme underlined the accent word; the italic cyan does that job now */
.section-heading h2 span::after { display: none; }

/* A small spaced label that sits above headings */
.cr-kicker {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 1.6rem;
}

p { color: var(--text); }

a { color: var(--primary); }
a:hover { color: var(--accent-deep); }

hr { border-color: var(--border); opacity: 1; }

/* ------------------------------------------------------------ 3. sections */

.inner-page-section,
.blogs-section,
.blogs-page-section {
  background: transparent;
  padding: 8rem 0;
}

/* Alternating bands: a soft blue wash instead of a flat grey */
.inner-page-section.section-band,
.inner-page-section.section-band-tint,
.blogs-section {
  background:
    linear-gradient(180deg, var(--canvas-alt) 0%, var(--primary-bg) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* --------------------------------------------------------- 4. page banner */

.site_banner,
.site_banner.about-banner {
  background:
    radial-gradient(60rem 30rem at 50% -20%, rgba(0,173,239,.16), transparent 70%),
    linear-gradient(180deg, var(--primary-bg) 0%, var(--canvas) 100%);
  border-bottom: 1px solid var(--border);
  padding: 2rem 0 1.5rem !important;
}
.site_banner .banner-content h1 {
  
  font-size: 5.4rem;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.12;
  margin-bottom: 1.6rem;
}
.site_banner .banner-content h1 span {
  color: var(--accent-deep);
  font-style: italic;
}
.site_banner .banner-content p {
  font-size: 1.85rem;
  color: var(--text-muted);
  max-width: 80rem;
  margin: 0 auto 1.5rem;
}
.breadcrumb { background: none !important; }
.breadcrumb-item a { color: var(--primary) !important; }
.breadcrumb-item a:hover { color: var(--accent-deep) !important; }
.breadcrumb-item.active,
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted) !important; }

/* ------------------------------------------------------------- 5. topbar */

/* The navy strip is where the brand introduces itself, so it keeps the deep
   end of the palette and puts the cyan on the icons. */
.topbar {
  background: linear-gradient(90deg, var(--primary-darker) 0%, var(--primary-dark) 55%, var(--primary) 100%);
  border-bottom: 3px solid var(--accent);
  color: #fff;
}
.topbar a, .topbar .tb-item { color: rgba(255,255,255,.88); }
.topbar a:hover { color: var(--accent); }
.topbar .tb-item i { color: var(--accent); }
.topbar .tb-social a { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.10); }
.topbar .tb-social a i { color: #fff; }
.topbar .tb-social a:hover { background: var(--accent); border-color: var(--accent); }
.topbar .tb-social a:hover i { color: var(--primary-darker); }

/* ------------------------------------------------------------- 6. header */

.header-div {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 .2rem 1.6rem rgba(20,38,63,.05);
}
.header-div .navigation_bar .main-menu .nav-item > a { color: var(--primary); font-weight: 600; }
.header-div .navigation_bar .main-menu .nav-item > a:hover,
.header-div .navigation_bar .main-menu .nav-item > a.active { color: var(--accent-deep); }
.header-div .navigation_bar .main-menu .nav-item > a::after { background: var(--accent-deep); }

.header-div .navigation_bar .main-menu .dropdown-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 2rem 4rem rgba(20,38,63,.14);
  padding: .8rem;
}
/* The panel is white now, but the base sheet drew it on the old dark --dark
   surface and set its items to #fff with white hairline rules. Those rules
   carry one more class than a `.main-menu .dropdown-item` selector does, so
   they win on specificity and the items disappear into the panel. Repeating
   the base sheet's own chain here is what actually overrides them. */
.header-div .navigation_bar .main-menu .dropdown-menu .dropdown-item {
  color: var(--text);
  background: transparent;
  border-radius: .6rem;
  padding: 1rem 1.4rem;
  font-size: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.header-div .navigation_bar .main-menu .dropdown-menu .dropdown-item:last-child {
  border-bottom: none;
}
.header-div .navigation_bar .main-menu .dropdown-menu .dropdown-item:hover,
.header-div .navigation_bar .main-menu .dropdown-menu .dropdown-item:focus,
.header-div .navigation_bar .main-menu .dropdown-menu .dropdown-item.active {
  background: var(--primary-light);
  color: var(--primary);
  padding-left: 1.9rem;
}
/* The base sheet's sliding underline is written as `.nav-item a::after`, which
   matches every link inside the item — dropdown entries included — so a cyan
   bar swiped under each one on hover. It belongs to the top-level links only. */
.header-div .navigation_bar .main-menu .dropdown-menu .dropdown-item::after {
  display: none;
}
.dropdown-divider { border-color: var(--border); opacity: 1; }

/* "About Us" opens as a panel, as in the client's reference (2026-09-13): its
   own heading, and a round icon beside each link. */
.header-div .navigation_bar .main-menu .dropdown-panel .dropdown-panel-title {
  list-style: none;
  margin: 0 0 .6rem;
  padding: .2rem 1.4rem 1.1rem;
  border-bottom: 1px solid var(--border);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--heading);
}
.header-div .navigation_bar .main-menu .dropdown-panel .dropdown-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  border-bottom: 0;
  font-weight: 600;
}
.header-div .navigation_bar .main-menu .dropdown-panel .dropdown-icon {
  flex: 0 0 3.4rem;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  color: var(--accent-deep);
  font-size: 1.45rem;
  transition: background .2s, color .2s;
}
.header-div .navigation_bar .main-menu .dropdown-panel .dropdown-item:hover .dropdown-icon,
.header-div .navigation_bar .main-menu .dropdown-panel .dropdown-item:focus .dropdown-icon,
.header-div .navigation_bar .main-menu .dropdown-panel .dropdown-item.active .dropdown-icon {
  background: var(--accent-deep);
  color: #fff;
}
@media (min-width: 1200px) {
  .header-div .navigation_bar .main-menu .dropdown-menu.dropdown-panel {
    min-width: 30rem;
    padding: 1.6rem 1.2rem 1.2rem;
  }
}
/* In the collapsed phone menu the tapped link already reads "About Us", so the
   panel's own heading would only repeat it. */
@media (max-width: 1199px) {
  .header-div .navigation_bar .main-menu .dropdown-panel .dropdown-panel-title { display: none; }
}

/* The header CTA carries WHITE text, so it uses --accent-cta rather than the
   logo's own #00ADEF: white on #00ADEF is 2.6:1 and would not read. Both ends
   of the gradient have to clear AA, not just its average — the lighter stop is
   the one that decides. */
.header-div .navigation_bar .contact-btn a,
.contact-btn a {
  background: linear-gradient(135deg, var(--accent-cta) 0%, var(--accent-deep) 100%);
  color: #fff;
  border: none;
  font-weight: 700;
  box-shadow: 0 .6rem 1.8rem rgba(0,122,176,.32);
}
.header-div .navigation_bar .contact-btn a:hover,
.contact-btn a:hover {
  background: linear-gradient(135deg, var(--accent-deep) 0%, #04597C 100%);
  color: #fff;
  box-shadow: 0 .9rem 2.4rem rgba(4,108,150,.40);
}

/* --------------------------------------------------------- 7. buttons */

.site-btn {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-color: transparent;
  color: #fff;
  border-radius: 5rem;
  box-shadow: 0 .6rem 1.8rem rgba(41,69,125,.24);
}
.site-btn:hover {
  color: #fff;
  filter: brightness(1.12);
  box-shadow: 0 .9rem 2.6rem rgba(41,69,125,.34);
  transform: translateY(-.2rem);
}
.site-btn::before { display: none; }

.site-btn.btn-outline {
  background: transparent;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  box-shadow: none;
}
.site-btn.btn-outline:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-dark);
  filter: none;
}

.site-btn.btn-secondary {
  background: var(--accent);
  color: var(--primary-darker);
  box-shadow: 0 .6rem 1.8rem rgba(0,173,239,.28);
}
.site-btn.btn-secondary:hover { background: var(--secondary-dark); color: #fff; }

/* the legacy "dark" variant is the solid navy button */
.site-btn.btn-dark {
  background: var(--heading);
  border-color: var(--heading);
  color: #fff;
}
.site-btn.btn-dark:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ------------------------------------------------------------- 8. cards */

/* Shared surface treatment for every card-ish block on the site */
.cr-panel,
.cr-service-card,
.cr-blog-card,
.blogs-section .blog-card,
.service-card,
.blog-stand {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 1.2rem 3rem rgba(20,38,63,.07);
}

.cr-panel { border-radius: 1.6rem; }

.cr-service-card,
.cr-blog-card,
.blogs-section .blog-card {
  border-radius: 1.4rem;
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s, border-color .3s;
}
.cr-service-card:hover,
.cr-blog-card:hover,
.blogs-section .blog-card:hover {
  transform: translateY(-.8rem);
  border-color: var(--accent);
  box-shadow: 0 2rem 4.5rem rgba(20,38,63,.13), 0 0 0 1px var(--glow);
}

.blogs-section .blog-content,
.cr-blog-body,
.cr-service-body { background: transparent; }

.blogs-section .blog-content h4,
.cr-blog-body h4,
.cr-service-body h3 { color: var(--heading); }

.blogs-section .blog-content p,
.cr-blog-body p,
.cr-service-body p { color: var(--text-muted); }

.blogs-section .date-author span { color: var(--text-muted); font-size: 1.4rem; }
.blogs-section .date-author .icon i { color: var(--accent-deep); }

.blogs-section .blog-content .read-more {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--primary);
  font-size: 1.45rem;
}
.blogs-section .blog-content .read-more:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 .5rem 1.6rem rgba(41,69,125,.26);
}

.cr-blog-more { color: var(--accent-deep); }

/* ------------------------------------------------------------- 9. forms */

.cr-input,
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="search"],
input[type="date"], select, textarea, .form-control {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.cr-input:focus,
input:focus, select:focus, textarea:focus, .form-control:focus {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 0 .3rem rgba(0,173,239,.20);
  outline: none;
}
::placeholder { color: var(--text-muted); opacity: .75; }
select option { background: var(--surface); color: var(--text); }

.cr-label { color: var(--heading); }

.cr-chip span {
  background: var(--canvas-alt);
  border-color: var(--border);
  color: var(--text);
}
.cr-chip input:checked + span {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.cr-chip:hover span { border-color: var(--accent-deep); color: var(--accent-deep); }
.cr-chip input:checked + span:hover { color: #fff; }

.aq-q span { background: var(--surface); border-color: var(--border); color: var(--text); }
.aq-q span::before { background: var(--canvas-alt); border-color: var(--border); }
.aq-q:hover span { background: var(--canvas-alt); border-color: var(--accent); }
.aq-q input:checked + span { background: var(--secondary-light); border-color: var(--accent-deep); }
.aq-q input:checked + span::before { background: var(--primary); border-color: var(--primary); box-shadow: inset 0 0 0 .35rem var(--surface); }

/* -------------------------------------------------------- 10. alerts */

.alert { border-radius: 1rem; border-width: 1px; }
.alert-danger  { background: var(--danger-soft);  border-color: rgba(163,44,42,.28);  color: var(--danger); }
.alert-success { background: var(--success-soft); border-color: rgba(21,112,74,.28);  color: var(--success); }
.alert-warning { background: var(--warning-soft); border-color: rgba(138,90,0,.28);   color: var(--warning); }
.alert-info    { background: var(--secondary-light); border-color: rgba(0,173,239,.34); color: var(--secondary-dark); }
.alert a { color: inherit; text-decoration: underline; }

/* ------------------------------------------------------------ 11. footer */

/* Deep navy so the white logo lockup lands on the ground it was drawn for. */
.footer-div {
  background: linear-gradient(180deg, var(--primary-dark) 0%, var(--primary-darker) 100%);
  border-top: none;
  color: rgba(255,255,255,.78);
  padding: 7rem 0 4rem;
}
.footer-div::before {
  background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 50%, var(--accent) 100%);
}
.footer-div h3,
.footer-div .foot-styl h3 {
  color: #fff;
  font-size: 1.8rem;
  letter-spacing: .04em;
}
.footer-div .foot-styl h3::after { background: var(--accent); }
.footer-div p { color: rgba(255,255,255,.75); }
.footer-div .footer-menu a,
.footer-div .contact-list a,
.footer-div .contact-list span { color: rgba(255,255,255,.78); }
.footer-div .footer-menu a:hover,
.footer-div .contact-list a:hover { color: var(--accent); }
.footer-div .contact-list i { color: var(--accent); }
.footer-div .social-icons a {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
}
.footer-div .social-icons a i { color: #fff; }
.footer-div .social-icons a:hover { background: var(--accent); border-color: var(--accent); }
.footer-div .social-icons a:hover i { color: var(--primary-darker); }
.foot-bottom-last {
  background: var(--primary-darker);
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.70);
  padding: 2.2rem 0;
  text-align: center;
  font-size: 1.4rem;
}
.foot-bottom-last a { color: rgba(255,255,255,.85); }
.foot-bottom-last a:hover { color: var(--accent); }

/* ------------------------------------------------- 12. legacy inline colours

   The templates used to carry inline styles from two retired brands (a dark
   green and a mystic purple) plus a scattering of gold accents. Those were
   re-pointed at the brand palette in the source files themselves, so no
   attribute-selector rescue is needed here any more.

   What is left inline is neutral greys (#333–#999 text, #fff panels, #eee
   rules) and the amber warning boxes. Both were written for a light theme and
   read correctly against this one, so they are deliberately left alone. */

/* ------------------------------------------------------------ 13. tables */

table, .table { color: var(--text); }
.table > :not(caption) > * > * {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.table thead th { color: var(--heading); border-color: var(--border); background: var(--canvas-alt); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--canvas-alt); }

/* --------------------------------------------------------- 14. utilities */

.text-muted { color: var(--text-muted) !important; }
.bg-white   { background: var(--surface) !important; }
.text-dark  { color: var(--heading) !important; }

img { max-width: 100%; }

/* Selection + scrollbar finish the theme off */
::selection { background: var(--accent); color: var(--primary-darker); }
* { scrollbar-color: var(--primary-light) var(--canvas-alt); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--canvas-alt); }
::-webkit-scrollbar-thumb { background: #c3d3e6; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* A visible keyboard ring in the brand cyan, everywhere. --accent-deep rather
   than the bright cyan: a focus indicator has to clear 3:1 against the surface
   behind it, and #00ADEF only manages 2.55:1 on white. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
.site-btn:focus-visible, .cr-tile:focus-visible {
  outline: 3px solid var(--accent-deep);
  outline-offset: 2px;
}

@media (max-width: 991px) {
  .inner-page-section, .blogs-section, .blogs-page-section { padding: 5.5rem 0; }
  .section-heading h2 { font-size: 3.4rem; }
  .site_banner .banner-content h1 { font-size: 3.8rem; }
  .site_banner, .site_banner.about-banner { padding: 2rem 0 1rem !important; }
}
@media (max-width: 575px) {
  .section-heading h2 { font-size: 2.9rem; }
  .site_banner .banner-content h1 { font-size: 3.1rem; }
}

/* ==========================================================================
   15. Home hero — a light brand band, not a flat navy slab
   ========================================================================== */

.cr-hero {
  background:
    radial-gradient(60rem 40rem at 12% 15%, rgba(0,173,239,.16), transparent 62%),
    radial-gradient(55rem 38rem at 90% 85%, rgba(41,69,125,.10), transparent 62%),
    linear-gradient(165deg, var(--primary-bg) 0%, var(--canvas) 55%, var(--secondary-light) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 9rem 0;
}
.cr-hero-kicker { color: var(--accent-deep); letter-spacing: .32em; }
.cr-hero-title {
  
  font-size: 6rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--heading);
}
.cr-hero-title span { color: var(--accent-deep); font-style: italic; }
.cr-hero-text { color: var(--text); }
.cr-hero .site-btn.btn-outline {
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(255,255,255,.6);
}
.cr-hero .site-btn.btn-outline:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-dark);
}
.cr-hero-img {
  border-radius: 1.6rem;
  border: 1px solid var(--border);
  box-shadow: 0 3rem 6rem rgba(20,38,63,.16), 0 0 0 1px var(--glow);
}

/* closing call-to-action band — the one full-navy block on a page */
.cr-cta-band {
  background:
    radial-gradient(50rem 26rem at 20% 50%, rgba(0,173,239,.22), transparent 65%),
    linear-gradient(120deg, var(--primary) 0%, var(--primary-darker) 100%);
  border-top: none;
}
.cr-cta-band h2 {
  
  color: #fff;
  font-size: 4rem;
}
.cr-cta-band p { color: rgba(255,255,255,.82); }
.cr-cta-band .site-btn {
  background: var(--accent);
  color: var(--primary-darker);
  box-shadow: 0 .6rem 1.8rem rgba(0,0,0,.20);
}
.cr-cta-band .site-btn:hover { background: #fff; color: var(--primary); }
.cr-cta-band .site-btn.btn-outline {
  background: transparent;
  border-color: rgba(255,255,255,.55);
  color: #fff;
}
.cr-cta-band .site-btn.btn-outline:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }

/* ==========================================================================
   16. Slider
   ========================================================================== */

.site-slider { background: var(--canvas); border-bottom: 1px solid var(--border); }
.sl-bg-gradient {
  background:
    radial-gradient(60rem 34rem at 50% 25%, rgba(0,173,239,.18), transparent 65%),
    linear-gradient(180deg, var(--primary-bg) 0%, var(--canvas) 100%);
}
#mainCarousel .carousel-indicators [data-bs-target] { background: rgba(41,69,125,.30); }
#mainCarousel .carousel-indicators .active { background: var(--accent); }
#mainCarousel .carousel-control-prev,
#mainCarousel .carousel-control-next {
  background: rgba(255,255,255,.80);
  border: 1px solid var(--border);
}
#mainCarousel .carousel-control-prev:hover,
#mainCarousel .carousel-control-next:hover {
  background: var(--primary);
  border-color: var(--primary);
}
/* Bootstrap draws these arrows white by default, which vanishes on a pale
   control — invert them, then flip back on the navy hover state. */
#mainCarousel .carousel-control-prev-icon,
#mainCarousel .carousel-control-next-icon { filter: invert(1) grayscale(1) brightness(.35); }
#mainCarousel .carousel-control-prev:hover .carousel-control-prev-icon,
#mainCarousel .carousel-control-next:hover .carousel-control-next-icon { filter: none; }

/* ==========================================================================
   17. Card reading components
   ========================================================================== */

.cr-question {
  background: var(--secondary-light);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
}
.cr-question .cr-q-label { color: var(--accent-deep); }
.cr-question .cr-q-text  { color: var(--heading); }

.cr-guide {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  border: none;
}
.cr-guide.is-done { background: linear-gradient(135deg, #15704A 0%, #0E5335 100%); }
.cr-guide i { color: var(--accent); }

.cr-panel-sub { color: var(--text-muted); }

/* deck tiles — the physical decks keep their own real colours, so these three
   stay literal. They name the card backs, not the brand. */
.card-reading-wrap {
  --tile-red:    #b3272d;
  --tile-blue:   #2b4fb0;
  --tile-yellow: #c9a227;
}
.cr-tile { border-color: rgba(20,38,63,.14); }
.cr-tile.is-idle { opacity: .32; }
.cr-tile.is-active:hover,
.cr-tile.is-active:focus-visible { border-color: var(--accent-deep); }

.cr-row {
  background: var(--canvas-alt);
  border-color: var(--border);
}
.cr-row.is-current {
  background: var(--secondary-light);
  border-color: var(--accent-deep);
}
.cr-row-label { color: var(--text-muted); }
.cr-picked { background: var(--surface); }
.cr-picked.is-yellow { box-shadow: 0 0 0 2px var(--accent-deep), 0 2px 8px rgba(20,38,63,.18); }

/* face-down draw */
.cr-facedown-inner {
  background: linear-gradient(150deg, var(--primary) 0%, var(--primary-darker) 100%);
  border: 1px solid var(--primary-dark);
  color: var(--accent);
  box-shadow: 0 .4rem 1.4rem rgba(20,38,63,.22);
}
.cr-facedown:hover .cr-facedown-inner,
.cr-facedown:focus-visible .cr-facedown-inner {
  box-shadow: 0 1rem 2.4rem rgba(0,173,239,.35), 0 0 0 2px var(--accent);
}

/* result */
.cr-result-img {
  border: 1px solid var(--border);
  box-shadow: 0 1.4rem 3.6rem rgba(20,38,63,.16), 0 0 4rem var(--glow);
}
.cr-result-name {
  
  color: var(--primary);
}
.cr-result-block h3 { color: var(--heading); }
.cr-result-block h3 i { color: var(--accent-deep); }
.cr-result-block p { color: var(--text); }
.cr-affirmation {
  background: var(--secondary-light);
  border-left: 4px solid var(--accent);
  color: var(--text);
}
.cr-result-foot { border-top-color: var(--border); }
.cr-result-foot p { color: var(--text-muted); }

/* notes / price / summary */
.cr-notes {
  background: var(--canvas-alt);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
}
.cr-notes h4 { color: var(--accent-deep); }
.cr-notes li { color: var(--text); }
.cr-notes a  { color: var(--primary); }

.cr-price-tag {
  background: var(--primary-bg);
  border: 1px dashed var(--primary);
}
.cr-price-amount { color: var(--primary); }
.cr-price-note   { color: var(--text-muted); }

.cr-summary li { border-bottom-color: var(--border); }
.cr-summary li span   { color: var(--text-muted); }
.cr-summary li strong { color: var(--heading); }
.cr-summary .cr-summary-total strong { color: var(--primary); }
.cr-thanks-icon { color: var(--success); }

.cr-service-price strong { color: var(--primary); }
.cr-service-price span   { color: var(--text-muted); }
.cr-service-price { border-top-color: var(--border); }

.cr-query-list li { color: var(--text); border-bottom-color: var(--border); }
.cr-query-list li::before {
  background: var(--secondary-light);
  color: var(--secondary-dark);
  border: 1px solid var(--accent);
}

/* ==========================================================================
   18. Blog page bits
   ========================================================================== */

.blog-stand { border-bottom-color: var(--border); }
.blog-stand .blog-content h4 { color: var(--heading); }
.blog-stand .blog-content p,
.blog-stand .blog-content .date-author span { color: var(--text-muted); }

.blog-body { color: var(--text); }
.blog-body h1, .blog-body h2, .blog-body h3,
.blog-body h4, .blog-body h5, .blog-body h6 { color: var(--heading); }
.blog-body a { color: var(--primary); text-decoration: underline; }
.blog-body a:hover { color: var(--accent-deep); }
.blog-body blockquote {
  background: var(--primary-bg);
  border-left: 4px solid var(--accent);
  color: var(--text);
}
.blog-body img { border-radius: 1rem; }
.blog-body pre, .blog-body code {
  background: var(--canvas-alt);
  color: var(--primary);
  border: 1px solid var(--border);
  border-radius: .6rem;
}

/* ==========================================================================
   19. Contact page
   ========================================================================== */

.contact-form-div {
  background:
    radial-gradient(55rem 30rem at 20% 10%, rgba(0,173,239,.16), transparent 65%),
    radial-gradient(50rem 28rem at 85% 90%, rgba(41,69,125,.10), transparent 62%),
    linear-gradient(160deg, var(--primary-bg) 0%, var(--canvas) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.contact-form-div .form-area {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 2rem 5rem rgba(20,38,63,.12);
}
.contact-form-div .form-area .form-heading {
  
  color: var(--heading);
}
.contact-form-div .form-area input,
.contact-form-div .form-area textarea,
.contact-form-div .form-area select {
  background: var(--canvas-alt);
  border: 1px solid var(--border);
  color: var(--text);
}
.contact-form-div .form-area input[type="submit"],
.contact-form-div .form-area button[type="submit"] {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border: none;
  color: #fff;
}

/* contact detail tiles */
.contact-info-box, .contact-card, .c-info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.contact-info-box h4, .contact-card h4 { color: var(--heading); }
.contact-info-box i, .contact-card i { color: var(--accent-deep); }

/* ==========================================================================
   20. Remaining surfaces on the legacy pages
   ========================================================================== */

/* about / learn-astrology portraits and stat tiles */
.bnr-img img, .mentor-img-wrap img, .story-img img {
  border-radius: 1.4rem;
  border: 1px solid var(--border);
  box-shadow: 0 1.6rem 4rem rgba(20,38,63,.14);
}
.mentor-content h3 { color: var(--heading); }
.mentor-tagline    { color: var(--accent-deep); }
.mentor-content p  { color: var(--text); }
.m-stat, .stat-box, .counter-box {
  background: var(--surface);
  border: 1px solid var(--border);
}
.m-stat h4, .stat-box h4, .counter-box h4 { color: var(--primary); }
.m-stat p, .stat-box p, .counter-box p { color: var(--text-muted); }

/* feature / course / event / webinar / podcast tiles */
.course-card, .event-card, .webinar-card, .podcast-card,
.feature-box, .service-card, .lp-card, .ud-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text);
}
.course-card h3, .event-card h3, .webinar-card h3, .podcast-card h3,
.feature-box h4, .service-card h4 { color: var(--heading); }
.course-card p, .event-card p, .webinar-card p, .podcast-card p,
.feature-box p, .service-card p { color: var(--text-muted); }
.service-card i, .feature-box i { color: var(--accent-deep); }

/* empty states */
.empty-state, .no-data {
  background: var(--canvas-alt);
  border: 1px dashed var(--border);
  color: var(--text-muted);
}

/* auth + account screens */
.auth-card, .login-card, .ud-panel, .ud-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.auth-card h2, .login-card h2 { color: var(--heading); }

/* pagination pills on the blog list use inline styles that already read the
   tokens, so they only need their hover state re-pointed */
.blogs-page-section a.page-pill:hover {
  border-color: var(--accent) !important;
  color: var(--accent-deep) !important;
}

/* ==========================================================================
   21. Tint surfaces

   --primary-light / --secondary-light are pale tints, so the rules that use
   them as a BACKGROUND need a colour dark enough to read on top.
   ========================================================================== */

.order-details-box,
.courses-section .level-badge,
.status-badge.ongoing,
.status-badge.upcoming,
.detail-box .icon-contact i,
.payment-method-btn:hover,
.zodiac-section .zodic-img:hover,
section.faq-section .faq-item .faq-toggle,
section.mentor-section .mentor-qualities .quality,
section.mentor-section .mentor-stats .m-stat {
  background: var(--primary-bg);
  border: 1px solid var(--border);
  color: var(--text);
}
section.mentor-section .mentor-qualities .quality:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}
section.mentor-section .mentor-stats .m-stat h4 { color: var(--primary); }
section.mentor-section .mentor-stats .m-stat p,
section.mentor-section .mentor-qualities .quality { color: var(--text); }
.detail-box .icon-contact i { color: var(--accent-deep); }
.courses-section .level-badge,
.status-badge.ongoing,
.status-badge.upcoming { color: var(--primary); }

.auth-success, .form-success-msg {
  background: var(--success-soft);
  border: 1px solid rgba(21,112,74,.28);
  color: var(--success);
}

section.faq-section .faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
}
section.faq-section .faq-item .faq-q,
section.faq-section .faq-item h4 { color: var(--heading); }
section.faq-section .faq-item .faq-a,
section.faq-section .faq-item p { color: var(--text); }
section.faq-section .faq-item .faq-toggle { color: var(--accent-deep); background: transparent; border: none; }

/* Stat counters on the About page */
.story-section .stat-box,
.about-stats .stat, .about-stats .stat-box {
  background: var(--primary-bg);
  border: 1px solid var(--border);
}
.story-section h2, .story-section h3 { color: var(--heading); }
.story-section p { color: var(--text); }

/* ==========================================================================
   22. Responsive

   These sit at the very end of the last stylesheet on purpose: the rules
   above re-declare sizes that cards.css only shrinks inside its own media
   queries, and media queries carry no extra specificity — so without a
   matching override here the desktop size would win on phones too.
   ========================================================================== */

/* Nothing may push the page wider than the viewport */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, table, pre { max-width: 100%; }

@media (max-width: 1199px) {
  .cr-hero { padding: 6rem 0; }
  .cr-hero-title { font-size: 4.4rem; }
}

@media (max-width: 991px) {
  .cr-hero { padding: 5rem 0; text-align: center; }
  .cr-hero-title { font-size: 3.8rem; }
  .cr-hero-text  { font-size: 2rem; margin-left: auto; margin-right: auto; }
  .cr-hero-cta   { justify-content: center; }
  /* Once the two columns stack, the video leads and the words follow it.
     order only moves it visually; desktop keeps words left, video right. */
  .cr-hero .row > .col-lg-6:last-child { order: -1; }
  .cr-cta-band h2 { font-size: 3rem; }
  .section-heading { margin-bottom: 4rem; }

  /* the collapsed menu drops onto the page, so it needs its own surface */
  .header-div .navigation_bar .menu-nav {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1.2rem;
    margin-top: 1.5rem;
    padding: 1.2rem 1.8rem 2rem;
    box-shadow: 0 2rem 4rem rgba(20,38,63,.14);
  }
  .header-div .navigation_bar .main-menu .nav-item a {
    border-bottom: 1px solid var(--border);
  }
  .header-div .navigation_bar .main-menu .dropdown-menu {
    background: var(--canvas-alt);
    box-shadow: none;
    margin: .4rem 0 1rem;
  }
  .header-div .navigation_bar .contact-btn { margin-top: 1.8rem; }
  .header-div .navigation_bar .contact-btn a { display: block; text-align: center; }
}

@media (max-width: 575px) {
  .cr-hero-title { font-size: 4.5rem; }
  .cr-hero-kicker { font-size: 1.1rem; letter-spacing: .22em; }
  .cr-cta-band h2 { font-size: 2.4rem; }
  .cr-hero-cta .site-btn { width: 100%; justify-content: center; }
  .cr-panel { padding: 2.4rem 1.8rem; }
  .cr-result-name { font-size: 2.6rem; }
  .section-heading h2 { font-size: 2.7rem; }
  .site_banner .banner-content h1 { font-size: 2.9rem; }
  .inner-page-section, .blogs-section, .blogs-page-section { padding: 4.5rem 0; }
}

/* The base sheet's burger is drawn in a retired brand's green, which is wrong
   against a white header — redraw it in the brand navy. */
.navbar-toggler {
  border: 1px solid var(--border);
  background: var(--surface);
}
.navbar-toggler:focus { box-shadow: 0 0 0 .3rem rgba(0,173,239,.28); }
.navbar-toggler-icon {
  filter: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%2329457D' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* ==========================================================================
   23. Brand lockup

   Two horizontal lockups are built from the master mark: logo-h-light.png
   carries a navy wordmark for the white header, logo-h-white.png the original
   white one for the navy footer. Both are 1462x360, so size by width.
   ========================================================================== */

.header-div .navigation_bar .brand-logo img {
  width: 20rem;
  max-width: 100%;
  height: auto;
}
/* The anchor around the logo is inline by default, so its box is only one
   line tall while the image inside is 39px — the picture spilled below its own
   container. Making the link a block puts the box round the image. */
.footer-div .foot-logo a { display: inline-block; line-height: 0; }
.footer-div .foot-logo img {
  width: 20rem;
  max-width: 100%;
  height: auto;
}
@media (max-width: 991px) {
  .header-div .navigation_bar .brand-logo img { width: 16rem; }
}
@media (max-width: 575px) {
  .header-div .navigation_bar .brand-logo img { width: 21rem; }
}