/* ===== Transformative AI Solutions – site.css (drop-in) ===== */

/* --- Base tokens (backgrounds only) --- */
:root{
  --bg:      #ffffff;   /* page background (white) */
  --bg-elev: #173a8c;   /* header/footer/blue sections */
  --brand:   #2aa7ff;
  --gold:    #eeb34d;
  --radius:  16px;
  --shadow:  0 8px 30px rgba(0,0,0,.3);
  --border:  #E5EAF0;
}

/* --- Reset & base layout --- */
*{ box-sizing:border-box; }
html,body{ min-height:100%; }
body{
  margin:0; background:var(--bg);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  display:flex; flex-direction:column;
  color: #1a1a1a; /* Default dark text for body */
}
.container{ width:min(1100px,92%); margin-inline:auto; }
a{ text-decoration:none; }

/* --- DEFAULT TYPOGRAPHY: DARK ON LIGHT --- */
/* Strong dark text for all main content areas */
main,
main *,
main h1, main h2, main h3, main h4, main h5, main h6,
main p, main li, main span, main a, main strong, main em, main small,
main div, main article, main section {
  color: #1a1a1a !important; /* Very dark gray for excellent contrast */
}

main .muted {
  color: #4a5568 !important; /* Darker muted text but still readable */
}

/* Headings */
h1,h2,h3{ font-family:"Plus Jakarta Sans", Inter, system-ui; }
h1{ 
  font-size: clamp(1.9rem, 4vw, 2.6rem); 
  margin:.5rem 0 .8rem; 
  color: #1a1a1a !important;
  font-weight: 700;
}
h2{ 
  font-size: clamp(1.5rem, 3vw, 2rem); 
  margin:1.25rem 0 .5rem; 
  color: #1a1a1a !important;
  font-weight: 600;
}
h3 {
  color: #1a1a1a !important;
  font-weight: 600;
}

/* Cards on white */
.cards{ display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; }
.card{
  grid-column:span 4; background:var(--bg-elev); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.1rem; box-shadow:var(--shadow);
}
.card h3{ 
  margin:.2rem 0 .35rem; 
  color: #ffffff !important;
}
.card p{ 
  color: color-mix(in oklab, var(--brand) 15%, white 85%) !important; /* Dark gray for card text */
}


.tag{display:inline-block; padding:.35rem .65rem; border-radius:999px; background:color-mix(in oklab, var(--brand) 15%, white 85%); color:color-mix(in oklab, var(--brand) 85%, black 15%); font-weight:700; font-size:.825rem}



/* Lists in main content */
main ul li, main ol li {
  color: #1a1a1a !important;
}

/* Hero list specifically */
.hero__list li { 
 color: #ffffff !important;
} 

/* Buttons */
.btn{
  display:inline-block; padding:.8rem 1.2rem; border-radius:12px; font-weight:700;
  background:var(--gold); color:#0f2fae !important; box-shadow:var(--shadow);
}
.btn.secondary{ 
  background:transparent; 
  border:2px solid var(--brand); 
  color:#1a1a1a !important; 
}

/* Header layout */
header.nav{ position:sticky; top:0; z-index:1000; background:var(--bg-elev); }
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand{ display:flex; gap:.75rem; align-items:center; }
.brand__logo-img{ height:40px; width:auto; border-radius:6px; display:block; }
nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:1rem; align-items:center; }
.nav-link{ padding:.55rem .8rem; border-radius:10px; font-weight:600; transition:background .2s,color .2s; }
.nav-link:hover{ background:rgba(42,167,255,.12); }

/* Footer layout */
footer{ background:var(--bg-elev); padding:40px 0; border-top:1px solid rgba(255,255,255,.08); }
.footer-grid{ display:grid; gap:1rem; grid-template-columns:2fr 1fr 1fr; }
footer input[type="email"]{
  width:80%; padding:.8rem 1rem; border-radius:10px; border:1px solid rgba(255,255,255,.25);
  background:transparent;
}

/* CTA band (blue background) */
.cta-band{
  background:linear-gradient(90deg,#173a8c,#2543a5);
  border-radius:18px; padding:1.25rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

/* --- RESPONSIVE --- */
@media (max-width:1024px){ .card{ grid-column:span 6; } }
@media (max-width:960px){ .footer-grid{ grid-template-columns:1fr; } }
@media (max-width:640px){
  .cards .card{ grid-column:span 12; }
  header.nav nav ul{ display:none; }
  header.nav .hamburger{ display:block; background:var(--bg-elev); border:none; font-size:1.3rem; }
  header.nav nav.open ul{
    display:flex; flex-direction:column; background:var(--bg-elev);
    position:absolute; right:4%; top:64px; padding:12px; border-radius:12px; box-shadow:var(--shadow);
  }
  footer #newsletter input[type="email"],
  footer #newsletter button.btn{
    width:80% !important; min-width:0 !important; box-sizing:border-box !important; margin:0 auto; text-align:center;
  }
}

strong{color:#ffffff !important;}

/* =========================================================
   FORCE WHITE TEXT INSIDE BLUE/DARK SECTIONS ONLY
   (Put these at the VERY BOTTOM so they always win)
   ========================================================= */

/* HEADER (blue) → white text */
header.nav,
header.nav *,
header.nav h1, header.nav h2, header.nav h3, header.nav h4, header.nav h5, header.nav h6,
header.nav p, header.nav li, header.nav span, header.nav a, header.nav strong, header.nav em, header.nav small,
header.nav button, header.nav input, header.nav div {
  color: #ffffff !important;
}
header.nav .muted{ color: #dbe4f2 !important; }
header.nav .nav-link{ color: #ffffff !important; }
header.nav .brand__name { color: #ffffff !important; }

/* FOOTER (blue) → white text */
footer,
footer *,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
footer p, footer li, footer span, footer a, footer strong, footer em, footer small,
footer button, footer input, footer div {
  color: #eaf2fb !important;
}
footer h4, footer .brand__name{ color: #ffffff !important; }
footer .muted, footer .legal a{ color: #adc4da !important; }
footer input::placeholder{ color: #dbe4f2 !important; }

/* CTA BAND (blue) → white text */
.cta-band,
.cta-band *,
.cta-band h1, .cta-band h2, .cta-band h3, .cta-band h4, .cta-band h5, .cta-band h6,
.cta-band p, .cta-band li, .cta-band span, .cta-band a, .cta-band strong, .cta-band em, .cta-band small,
.cta-band button, .cta-band div {
  color: #ffffff !important;
}
.cta-band .muted{ color: #dbe4f2 !important; }
/* Keep secondary button visible on blue */
.cta-band .btn.secondary{ 
  border-color: #ffffff !important; 
  color: #ffffff !important; 
  background: transparent !important;
}

/* Ensure blue sections override any main content rules */
section#advisor,
section#advisor *,
section#advisor h1, section#advisor h2, section#advisor h3, section#advisor h4, section#advisor h5, section#advisor h6,
section#advisor p, section#advisor li, section#advisor span, section#advisor a, section#advisor strong, section#advisor em, section#advisor small,
section#advisor button, section#advisor div {
  color: #ffffff !important;
}

.pleaseWork{color:"#ffffff !important";}

strong{color:#ffffff !important;}

/* Make images fit within content area */
.content img,
article img,
.post-content img {
    max-width: 100%;
    height: auto;
}

/* Change title color to white */
h1.title,
.post-title,
article h1,
.title {
    color: white !important;
}

/* Hero/Footer list styling */
.hero__list2 {
  list-style: none;
  padding-left: 0;
}

 .hero__list2 li {
  padding-left: 1.5em;
  position: relative;
} 

.hero__list2 li::before {
  content: "•";
  position: absolute;
  left: 0.5em;
  color: #ffffff;
}
