/*
 * theme.css — applies the admin-controlled Theme (colours + fonts).
 * Loaded LAST. Colours flow from CSS variables set in the layout's <style id="theme-vars">.
 * The legacy stylesheets' brand hexes were converted to var(--c-navy / --c-navy-2 / --c-gold),
 * so this file only handles fonts, page background, warm-beige sections, and link contrast.
 */

/* --- Fonts (admin-selectable) --- */
body,
button,
input,
select,
textarea {
  font-family: var(--font-body);
}
h1, h2, h3, h4, h5, h6,
.section-title,
.head-title,
.main-title,
.entry-title {
  font-family: var(--font-heading);
}

/* Poppins renders noticeably heavier than the previous Inter at the same
 * numeric weight, so headings looked over-bold. Step them down to semibold
 * (600) site-wide for a cleaner, more refined look. */
h1, h2, h3, h4, h5, h6,
.section-title,
.head-title,
.main-title,
.entry-title,
.h1, .h2, .h3, .h4 {
  font-weight: 600;
}

/*
 * Editorial serif — the display face for the "premium" sections (hero, Core
 * Beliefs, Founders, etc.). Georgia, weight 400, matching the reference HTML.
 * `--font-editorial` is emitted from themeCssVars() alongside the other tokens.
 */
.font-editorial {
  font-family: var(--font-editorial, Georgia, 'Times New Roman', serif);
  font-weight: 400;
  letter-spacing: 0;
}

/* "How We Buy Our Stocks" (.construct) opts back into Poppins, per request —
   loaded via the Poppins <link> in the layout. Headings need the extra
   specificity to beat the `font-heading` utility on the section title. */
.construct {
  font-family: 'Poppins', 'Avenir Next', sans-serif;
}
section.construct :where(h1, h2, h3, h4, h5, h6) {
  font-family: 'Poppins', sans-serif;
}

/* --- Base surfaces --- */
body {
  background-color: var(--c-page-bg);
  color: var(--c-body-text);
}

/* The main wrapper picked up the global navy (#323879→navy). Reset it to the light
 * page background so content sections default to dark-text-on-light. Intentionally
 * dark feature sections (hero, "How We Buy", footer) declare their own dark bg. */
.site-main {
  background-color: var(--c-page-bg);
}

/* --- Editorial inner-page header (shared .inner-baner-container) ---
 * Navy band behind the transparent header, then a centred Georgia serif title
 * with a gold accent rule beneath — matching the site's editorial language.
 * Applies to Blog, Press, legal pages, Terms, Disclosures, Team, etc. at once. */
.inner-baner-container {
  padding: 200px 0 96px !important;
}
.inner-baner-container .inner-title {
  position: relative;
  display: inline-block;
  padding-bottom: 22px;
  font-size: clamp(38px, 5.4vw, 72px);
  font-weight: 400;
  letter-spacing: 0;
}
.inner-baner-container .inner-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 72px;
  height: 3px;
  border-radius: 2px;
  background: var(--c-gold);
}
@media (max-width: 640px) {
  .inner-baner-container {
    padding: 160px 0 64px !important;
  }
}

/* "How We Buy Stocks" (.construct) is a designed dark section — navy background.
 * Text colours are set explicitly in the redesigned component (Tailwind), so no
 * blanket colour rules here (they used to override the gold accent + muted text). */
.construct {
  background-color: var(--c-navy);
}

/* The wavy section divider is removed site-wide (per design). Hide any that a
 * legacy template still renders so none slip through. */
.title-divider {
  display: none !important;
}

/* Header dropdown: after clicking a submenu link the client-side navigation
 * leaves the pointer over the menu, so :hover/:focus-within kept it open. JS
 * adds .is-collapsed on click to force it shut until the next fresh hover. */
.site-header-transparent .main-navigation ul > li.menu-item-has-children.is-collapsed > ul {
  display: none !important;
}

/* "Why INVasset LLP" tiles now use line (stroke) icons. Colour them via
 * currentColor — navy by default, gold on card hover — and size to a neat
 * square (the legacy fill/width rules were for the old solid glyphs). */
.icon-box span svg {
  width: auto !important;
  height: 84px !important;
  max-height: 84px !important;
  color: var(--c-navy);
  stroke: currentColor;
  transition: color 0.3s ease;
}
.home-service-box:hover .icon-box span svg {
  color: var(--c-gold);
}

/* --- Warm beige for light content sections (was flat white/greys) --- */
.home-banner-bottom-sec,
.why-us-section,
.core-belief-section,
.founder-section,
.tab-section,
.blog-page-section,
.single-post-section,
.drive-download-sec,
.home-team {
  background-color: var(--c-page-bg);
}

/* Subtle beige panels where the legacy design used a light card band */
.bottom-part-bg,
.why-us-box,
.belief-content {
  background-color: color-mix(in srgb, var(--c-beige) 55%, #ffffff);
}

/* --- Links: keep body-content links readable (gold is too light on white for text) --- */
.entry-content a,
.single-post-inner a,
main p a {
  color: var(--c-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.entry-content a:hover,
.single-post-inner a:hover,
main p a:hover {
  color: var(--c-link-hover);
}

/* Both fund tables now sit inside the white card (the card stacks above the
 * banner via overrides.css), so labels keep the dark legacy colour (#333).
 * The .names-on-dark hook remains available if a strip is ever placed on navy. */

/* Redesigned returns table: force the navy header labels white regardless of the
 * legacy `th { color:#383838 }` element rule (specificity-proof, cache-proof). */
.returns-table thead th {
  color: #ffffff;
}
/* Reference performance table: dotted taupe row separators */
.returns-table tbody td {
  border-bottom: 1px dotted rgba(153, 121, 83, 0.42);
}

/* --- Gold accents for decorative touches --- */
.section-title::after,
.head-title::after {
  background-color: var(--c-gold);
}
.button-round:hover,
.button-text:hover {
  color: var(--c-gold);
}

/* Gold focus ring (keeps accessibility.css focus visibility, on-brand) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
}

/* ============================ Homepage hero ============================ */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes heroGlowFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.08); }
}
@keyframes heroGlowFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-36px, 28px) scale(1.12); }
}
@keyframes heroSheen {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-reveal { opacity: 0; animation: heroFadeUp 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-glow { animation: heroGlowFloat 14s ease-in-out infinite; }
  .hero-glow-2 { animation: heroGlowFloat2 18s ease-in-out infinite; }
  .hero-accent-sheen {
    background: linear-gradient(100deg, var(--c-gold) 20%, #f4e3b8 45%, var(--c-gold) 70%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: heroSheen 6s linear infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-accent-sheen { color: var(--c-gold); }
}
/* Faint engraved diagonal lines on the right of the editorial hero. Uses
   repeating-linear-gradient so the strokes stay perfectly parallel and
   continuous (no tile seams), and a left-fading mask so there is no hard edge. */
.hero-grid-texture {
  opacity: 0.4;
  background-image: repeating-linear-gradient(
    68deg,
    transparent 0 84px,
    rgba(232, 220, 200, 0.5) 84px 85px
  );
  -webkit-mask-image: linear-gradient(to left, #000 3%, transparent 82%);
  mask-image: linear-gradient(to left, #000 3%, transparent 82%);
}

/* ============================ Logo marquee ============================ */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track {
  animation: marqueeScroll 45s linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; }
}

/* ===================== Scroll-reveal animations ====================== */
/* Elements with .reveal rise + fade in as they enter the viewport. Only active
 * when JS is on (html.js), so no-JS users always see content. */
html.js .reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===================== Sticky stacking cards ===================== */
/* Each section pins to the top of the viewport; the next section scrolls up and
 * stacks over it like a deck of cards. Rounded top + upward shadow make each
 * incoming card read as a distinct panel sliding onto the deck. */
.stack {
  position: relative;
}
.stack > section {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 34px 34px 0 0;
  box-shadow: 0 -18px 50px -24px rgba(31, 42, 68, 0.45);
  transform-origin: center 42%;
  will-change: transform, filter;
}
/* Default surface (0-specificity) so sections with their own bg keep their colour. */
:where(.stack > section) {
  background-color: var(--c-page-bg);
}
/* Unify every light stacking card to the warm page background. Legacy classes
 * left them mismatched — .bg-light-grey was #F8F8F8 grey (Founders, Core
 * Beliefs) and the Why-Us inner was forced #fff, which showed as an off-colour
 * strip at the top of the section. (The dark "How We Buy" card keeps its navy.) */
.stack > section.bg-light-grey {
  background-color: var(--c-page-bg) !important;
}
/* Why Us — warm cream "paper" background with faint gold + navy corner glows,
 * matching invasset_why_pms_premium.html. */
.stack > section.service-why-section {
  background-color: var(--c-paper) !important;
  background-image:
    radial-gradient(circle at 12% 16%, rgba(198, 167, 94, 0.16), transparent 28%),
    radial-gradient(circle at 88% 74%, rgba(15, 30, 63, 0.1), transparent 30%);
}
/* The legacy inner padding was 100px top / 0 bottom, which — with the 30px
 * trailing tile margin — left far more empty space above the heading than
 * below the tiles. Balance it (top ≈ bottom-tile-margin) so the flex-centred
 * content sits evenly. */
.service-why-section .service-page-inner {
  padding-top: 30px !important;
  padding-bottom: 0 !important;
}
/* A dark deck card (navy gradient) used to break up the run of light sections.
 * Applied to Print Media so the stack alternates light/dark and Video stays
 * light — separating it from the navy footer below. */
.stack > section.deck-card-dark {
  background: linear-gradient(160deg, var(--c-navy-2), var(--c-navy)) !important;
}
/* Video Coverage — warm cream "paper" with the same corner glows as the other
 * premium sections (matches Why PMS / Founders / Core Beliefs). Works both as a
 * deck card and as the standalone /media/video-coverage section. */
.video-coverage {
  background-color: var(--c-paper) !important;
  background-image:
    radial-gradient(circle at 12% 16%, rgba(198, 167, 94, 0.14), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(15, 30, 63, 0.1), transparent 30%);
}
/* Standalone /media/video-coverage: navy band behind the transparent header
   (its nav text is white) before the warm paper begins. */
.video-coverage-page {
  min-height: 100vh;
  background-image:
    linear-gradient(180deg, var(--c-navy) 0 150px, transparent 150px),
    radial-gradient(circle at 12% 16%, rgba(198, 167, 94, 0.14), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(15, 30, 63, 0.1), transparent 30%);
}
@media (max-width: 640px) {
  .video-coverage-page {
    background-image:
      linear-gradient(180deg, var(--c-navy) 0 96px, transparent 96px),
      radial-gradient(circle at 12% 16%, rgba(198, 167, 94, 0.12), transparent 30%);
  }
}
/* A tall card that scrolls THROUGH the deck (not pinned) so all its content is
 * visible — it still covers the previous card on the way up. */
.stack > section.stack-flow {
  position: relative;
  min-height: 0;
  display: block;
}
/* Pins on large screens (where its grid fits a viewport and can dim as the next
 * card covers it); scrolls through below lg where the cards stack taller. */
@media (max-width: 1023px) {
  .stack > section.stack-pin-lg {
    position: relative;
    min-height: 0;
    display: block;
  }
}
/* Core Beliefs is a pinned deck card (sticky, dims/stacks like the others).
 * Flex-centre its content and override both the Bootstrap d-md-block (which
 * would force display:block) and the legacy 150/200px padding. Re-theme the
 * hub/nodes to navy + gold with a slowly rotating gold ring for life. */
@media (min-width: 768px) {
  .stack > section.investment-beliefs-section {
    display: flex !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}
.investment-beliefs-section .core-belief {
  background: radial-gradient(circle at 30% 25%, var(--c-navy-2), var(--c-navy)) !important;
  box-shadow: 0 20px 50px -18px rgba(31, 42, 68, 0.55);
  position: relative;
}
/* The "Core Beliefs" text now lives in the section heading, so the hub is just
 * the icon — enlarge it and drop the old bottom padding that made room for text. */
.investment-beliefs-section .core-belief img {
  width: 92px !important;
  padding-bottom: 0 !important;
}
/* Gap between the heading and the diagram. The bottom labels overhang the
 * diagram box by ~85px, so flex-centring on the box alone leaves too little
 * space below; a bottom margin pushes the whole thing back to visual centre. */
@media (min-width: 768px) {
  .investment-beliefs-section .belief-round {
    margin-top: 2.5rem;
    margin-bottom: 5rem;
  }
}
/* rotating dashed gold ring around the hub */
.investment-beliefs-section .core-belief::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 2px dashed var(--c-gold);
  opacity: 0.55;
}
@media (prefers-reduced-motion: no-preference) {
  .investment-beliefs-section .core-belief::before {
    animation: cbRingSpin 26s linear infinite;
  }
}
@keyframes cbRingSpin {
  to {
    transform: rotate(360deg);
  }
}
/* When any belief node is hovered, fade the others (JS toggles .cb-dim) so the
 * hovered pill's in-place expanded description never clashes with the
 * neighbouring labels. */
.cb-node {
  transition: opacity 0.25s ease;
}
.cb-node.cb-dim {
  opacity: 0.12;
}
/* numbered node circles: navy fill, gold ring, gold number */
.investment-beliefs-section .circle {
  background: var(--c-navy) !important;
  color: var(--c-gold) !important;
  box-shadow: 0 0 0 3px rgba(198, 167, 94, 0.25), 0 10px 24px -12px rgba(31, 42, 68, 0.5);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.investment-beliefs-section .circle:hover {
  transform: scale(1.12);
  box-shadow: 0 0 0 4px rgba(198, 167, 94, 0.45), 0 12px 26px -10px rgba(31, 42, 68, 0.6);
}
/* label pills: crisp white with a subtle gold left accent + hover lift */
.investment-beliefs-section .without-hover {
  border: 1px solid rgba(31, 42, 68, 0.06) !important;
  border-left: 3px solid var(--c-gold) !important;
  box-shadow: 0 10px 30px -16px rgba(31, 42, 68, 0.35) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease, opacity 0.28s ease;
}
.investment-beliefs-section [class$='-belief']:hover .without-hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -16px rgba(31, 42, 68, 0.45) !important;
}
.investment-beliefs-section .without-hover h3 {
  color: var(--c-navy) !important;
}

/* Hover description popup: animate in (rise + fade + scale) instead of the
 * instant display:none→block, and re-theme it (gold-tinted, soft shadow). */
.investment-beliefs-section .belief-content {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.94);
  transform-origin: center bottom;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.4s;
  pointer-events: none;
  width: 350px !important;
  max-width: calc(100vw - 2.5rem);
  border: 1px solid rgba(198, 167, 94, 0.4) !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  box-shadow: 0 26px 60px -20px rgba(31, 42, 68, 0.45) !important;
  background: #ffffff !important;
}
.investment-beliefs-section .belief-content h3 {
  color: var(--c-navy) !important;
  font-weight: 700 !important;
}
.investment-beliefs-section .belief-content p {
  color: rgba(42, 46, 55, 0.72);
  margin-bottom: 0;
}
.investment-beliefs-section .first-belief:hover .first-content,
.investment-beliefs-section .second-belief:hover .second-content,
.investment-beliefs-section .third-belief:hover .third-content,
.investment-beliefs-section .forth-belief:hover .forth-content,
.investment-beliefs-section .five-belief:hover .five-content,
.investment-beliefs-section .six-belief:hover .six-content,
.investment-beliefs-section .seven-belief:hover .seven-content {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto;
}
/* When the popup is up, fade its short label pill so it doesn't compete. */
.investment-beliefs-section [class$='-belief']:hover .without-hover {
  opacity: 0.25;
}
/* Give the numbered node a gold ring pulse on hover for extra polish. */
.investment-beliefs-section [class$='-belief']:hover .circle {
  transform: scale(1.15);
  box-shadow: 0 0 0 5px rgba(198, 167, 94, 0.4), 0 12px 26px -10px rgba(31, 42, 68, 0.6);
}

/* Fall back to a normal stacked layout when motion is reduced. */
@media (prefers-reduced-motion: reduce) {
  .stack > section {
    position: static;
    min-height: 0;
    box-shadow: none;
    border-radius: 0;
  }
}