/* ===========================
   Conversant app – custom.css
   (non-Tailwind, app-specific CSS)
   =========================== */

/* ---- Brand tokens ---- */
body {
  /* Default Base (Research) - Amber/Yellow */
  --brand-amber: #d78b25; 
  --band-yellow: #fffaf0;         
  --card-yellow: #fff3d6;
  --icon-yellow: #ffe4a3;         
  
  /* Keep the ink/gray scales static as they are neutral */
  --ink-900:     #111827;         
  --ink-700:     #374151;         
  --ink-600:     #4b5563;         
}

/* FINANCE THEME OVERRIDES (Green/Emerald) */
.theme-finance {
  --brand-amber: #059669; /* Primary Green */
  --band-yellow: #ecfdf5; /* Soft Emerald bg */
  --card-yellow: #d1fae5; /* Hover Emerald bg */
  --icon-yellow: #a7f3d0; /* Icon bg */
}

/* LEGAL THEME OVERRIDES (Blue/Navy) */
.theme-legal {
  --brand-amber: #1e3a8a; /* Primary Navy */
  --band-yellow: #eff6ff; /* Soft Blue bg */
  --card-yellow: #dbeafe; /* Hover Blue bg */
  --icon-yellow: #bfdbfe; /* Icon bg */
}

/* Ensure the cards have a distinct border in different themes */
.landing-card-soft {
    border: 1px solid var(--brand-primary);
    opacity: 0.9;
}

/* ---- Landing-only: hide any sidebar on the public page ---- */
body.__landing_no_sidebar aside,
body.__landing_no_sidebar .sidebar,
body.__landing_no_sidebar nav[aria-label="Sidebar"],
body.__landing_no_sidebar .app-sidebar,
body.__landing_no_sidebar .left-nav { display: none !important; }
body.__landing_no_sidebar .container--with-sidebar { margin-left: 0 !important; }

/* ---- Components (landing) ---- */
.landing-pill { background: var(--card-yellow); color: var(--brand-amber); }

.landing-card-soft {
  background: var(--card-yellow);
  border: 1px solid #f3f4f6;
  border-radius: 0.5rem;
  width: 280px;            /* keep fixed to prevent stretching */
  height: 220px;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  display: flex; flex-direction: column;
}

.landing-icon{
  width: 2.25rem; height: 2.25rem;
  border-radius: .5rem;
  display:flex; align-items:center; justify-content:center;
  background: var(--icon-yellow);
  color: var(--brand-amber);
  margin-bottom: .75rem;
}

/* workflow tiles (no card background) */
.workflow-tile{ width: 280px; text-align: center; }
.workflow-icon{
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  display:flex; align-items:center; justify-content:center;
  background: var(--band-yellow); color: var(--brand-amber);
  margin: 0 auto .75rem auto;
}

/* buttons used in landing */
.landing-cta       { background: var(--brand-amber); color: #fff; }
.landing-cta:hover { filter: brightness(.95); }
.landing-ghost     { border: 1px solid #e5e7eb; color: #111827; background: #fff; }
.landing-ghost:hover { background: #f9fafb; }

/* rows */
.row-center { display:flex; justify-content:center; align-items:stretch; gap:1.25rem; flex-wrap:wrap; }

/* hero tweaks */
.landing-hero h1 { letter-spacing: -0.02em; }

/* make “bands” span the full viewport width even inside a centered container */
.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* band backgrounds + vertical rhythm */
.band        { padding-block: clamp(4.5rem, 10vh, 7.5rem); }
.band-tall   { padding-block: clamp(5.5rem, 12vh, 8.5rem); }
.band-yellow { background: var(--band-yellow); }
.band-white  { background: #fff; }

/* colorize black SVGs via filter (used with <img class="img-amber">) */
.img-amber {
  filter: brightness(0) saturate(100%)
          invert(57%) sepia(63%) saturate(572%)
          hue-rotate(355deg) brightness(96%) contrast(93%);
}

/* consistent section headings */
.section-title {
  font-size: 2.25rem !important;  /* ~text-4xl */
  line-height: 1.15;
  font-weight: 800;
  color: var(--ink-900);
}
.text-brand-amber { color: var(--brand-amber) !important; }

/* ===========================
   (Optional) App-wide modal (Help)
   =========================== */
.cvs-modal{position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.40); padding:16px; z-index:10000;}
.cvs-modal.is-open{display:flex;}
.cvs-modal__card{background:var(--band-yellow); color:var(--ink-700);
  border:1px solid #f3d7a6; border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.2);
  width:min(92vw,720px); max-width:720px; padding:20px 22px;}
.cvs-modal__head{display:flex; align-items:center; gap:12px; margin-bottom:8px;}
.cvs-modal__title{font-size:1.25rem; font-weight:800; color:var(--ink-900);}
.cvs-modal__x{margin-left:auto; font-size:22px; line-height:1;
  background:transparent; border:0; cursor:pointer; color:var(--ink-700);}
.cvs-modal__footer{margin-top:18px; display:flex; justify-content:flex-end;}
.cvs-btn-amber{background:var(--brand-amber); color:#fff;
  border:0; padding:.5rem .875rem; border-radius:.5rem; cursor:pointer;}
body.__landing_no_sidebar aside,
body.__landing_no_sidebar .sidebar,
body.__landing_no_sidebar nav[aria-label="Sidebar"],
body.__landing_no_sidebar .app-sidebar,
body.__landing_no_sidebar .left-nav { display: none !important; }
body.__landing_no_sidebar .container--with-sidebar { margin-left: 0 !important; }
/* Perfect circular help chip (wins against any .btn defaults) */
.help-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2rem;               /* 32px */
  height:2rem;              /* 32px */
  padding:0 !important;     /* kill inherited button padding */
  border-radius:9999px !important; /* force full circle */
  line-height:1;            /* no extra vertical space */
  background:#FDEFD9;
  color:#B86A12;
  border:1px solid #E7CBA3;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.help-chip:hover{ background:#FAE7C3; }
.help-chip:focus{
  outline:2px solid rgba(184,106,18,.30);
  outline-offset:2px;
}
/* Ensure footer is always visible */
body.__landing_no_sidebar footer,
body.__landing_no_sidebar .footer,
body.__landing_no_sidebar .app-footer { display: block !important; }

/* Components */
.landing-pill { background: var(--card-yellow); color: var(--brand-amber); }

/* Feature card: keep a constant, square-ish footprint (fixed width + height)
   regardless of band width/responsiveness.  */
.landing-card-soft {
  background: var(--card-yellow);
  border: 1px solid #f3f4f6;
  border-radius: 0.5rem;            /* squarer corner */
  width: 280px;                     /* FIXED size -> stable look */
  height: 220px;                    /* FIXED size -> stable look */
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  display: flex; flex-direction: column;
}

/* Showcase card: Variable height for variable length text, distinct look */
.landing-card-showcase {
  background: white;
  border: 1px solid #f9a826;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  display: grid;
  grid-template-rows: 60px 1fr 44px;
  gap: 8px;
  height: 360px;
  overflow: hidden;
  transition: transform 0.2s ease-in-out;
}

.landing-card-showcase:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.landing-card-showcase img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  width: 100%;
}

.cvs-modal__card--wide {
  width: min(95vw, 1400px) !important;
  max-width: 1400px !important;
  height: 90vh;
  display: flex;
  flex-direction: column;
}

.cvs-modal__body {
    flex-grow: 1;
    overflow-y: auto;
}

.landing-icon{
  width: 2.25rem; height: 2.25rem;
  border-radius: .5rem;
  display:flex; align-items:center; justify-content:center;
  background: var(--icon-yellow);
  color: var(--brand-amber);
  margin-bottom: .75rem;
}

/* Workflow tiles are *not* cards: no bg/border; fixed width for alignment */
.workflow-tile{
  width: 280px;
  text-align: center;
}
.workflow-icon{
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  display:flex; align-items:center; justify-content:center;
  background: var(--band-yellow); color: var(--brand-amber);
  margin: 0 auto .75rem auto;
}

.landing-cta       { background: var(--brand-amber); color: #fff; }
.landing-cta:hover { filter: brightness(.95); }
.landing-ghost     { border: 1px solid #e5e7eb; color: #111827; background: #fff; }
.landing-ghost:hover { background: #f9fafb; }

/* Rows (centered, wrap on small screens) */
.row-center { display:flex; justify-content:center; align-items:stretch; gap:1.25rem; flex-wrap:wrap; }

/* Tighter hero typography */
.landing-hero h1 { letter-spacing: -0.02em; }

/* Full-bleed section helper: simplified to 100% width.
   The parent container issues (sidebar margin) are fixed in main.py by show_sidebar=False. */
.full-bleed {
  width: 100%;
}

/* Band backgrounds + generous vertical rhythm (content vertically centered feeling) */
.band        { padding-block: clamp(4.5rem, 10vh, 7.5rem); }
.band-tall   { padding-block: clamp(5.5rem, 12vh, 8.5rem); }  /* hero */
.band-yellow { background: var(--band-yellow); }
.band-white  { background: #fff; }
                               
/* Turn pure-black SVGs into brand amber (#d78b25) */
.img-amber {
  filter: brightness(0) saturate(100%)
          invert(57%) sepia(63%) saturate(572%)
          hue-rotate(355deg) brightness(96%) contrast(93%);
}
                               
/* --- utilities to make headings consistent --- */
.section-title {
  /* match Tailwind text-4xl (≈ 2.25rem) */
  font-size: 2.25rem !important;
  line-height: 1.15;
  font-weight: 800;
  color: var(--ink-900);
}

.text-brand-amber { color: var(--brand-amber) !important; }