/* ============================================================
   Evolv Ventures custom additions for Quark 2
   Append the contents below into: user/themes/quark2/css/custom.css
   Do NOT replace the whole file if you already have other rules
   in custom.css, just paste this block in underneath them.
   ============================================================ */

/* --- Evolv brand palette, sitewide ---
   Reference: #284389 navy, #4A73E8 blue, #F3B3A6 coral, #89023E maroon,
   #F5F5F5 gray. The blue also needs to be set as Quark2's "Accent Color"
   in Admin (Configuration -> Themes -> Quark 2), or via
   user/config/themes/quark2.yaml, see the README in this folder. Setting
   the accent color there is what recolors links, buttons, and focus
   rings sitewide, everything below fills in the rest of the palette. */

:root,
:root[data-theme="light"] {
  --q2-bg: #F5F5F5; /* page canvas, matches brand gray exactly */
}

/* Safety net for the full-bleed hero below: on desktop browsers with a classic
   (space-taking) scrollbar, "100vw" measures slightly wider than the actually visible
   area, which can otherwise cause a few px of horizontal overflow / a second scrollbar.
   This has no effect on anything else on the page. */
body {
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  color: #284389; /* navy headings sitewide, body text stays neutral for readability */
}

h2::before {
  background: #F3B3A6; /* coral accent bar under h2 headings */
}

blockquote {
  border-left-color: #89023E; /* maroon, used sparingly as a highlight */
}

/* --- Site header / navigation ---
   Quark2 deliberately keeps the nav monochrome by design (it's tied to
   --q2-text-strong, not the accent color), which is why setting the accent
   alone didn't touch the header. These rules bring the nav into the brand
   palette explicitly. */

.navbar-brand,
.dropmenu a,
.overlay .overlay-menu a {
  color: #284389; /* navy */
}

.dropmenu a:hover,
.overlay .overlay-menu a:hover {
  color: #4A73E8; /* blue, hover feedback */
}

.dropmenu a.active {
  background: #284389;
  color: #ffffff;
}
.dropmenu a.active:hover {
  background: #16296b; /* slightly darker navy on hover, stays legible */
  color: #ffffff;
}

/* --- Logo sizing ---
   Two compounding problems made the logo unreadable at its default size. First,
   Quark2's own theme.css caps `.navbar-brand img` at height:28px, sized for a roughly
   square icon-only mark, not a wider icon+wordmark lockup. Second, the source PNG
   itself (Original Logo.png) has a lot of transparent-ish padding baked into its
   canvas, only about 58% of the image's height is actual visible logo ink, so at
   28px CSS height the real visible mark rendered at roughly 16px tall. Re-uploading a
   tightly-cropped version of the same file (same filename, same path, so no template
   change needed) fixes the second problem; this override fixes the first. Loads after
   theme.css so it wins without needing extra specificity. */
.navbar-brand img,
.navbar-brand svg {
  height: 40px;
}

/* --- Hero section: "Insight from noise" animated background (home.html.twig) ---
   Dots morph between a line/bar/donut chart, drawn in a centered "safe zone" (SVG x
   ~600-1000 of a 1600-wide viewBox) so they never sit directly behind the text box,
   which docks left. That's why the text isn't centered here, unlike a typical hero. */

.evolv-hero {
  /* Full-bleed: breaks out of Quark2's centered .container (max-width ~1200-1450px)
     so the hero spans the entire viewport edge-to-edge, on every breakpoint, not just
     the constrained column width the rest of the page content sits in. Standard
     "break out of parent" trick: shift the box's left edge to the viewport's
     horizontal center, then pull it back by half its own (now 100vw) width. Works
     regardless of the parent's padding/max-width, no calc() tied to those values needed. */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);

  position: relative;
  overflow: hidden;
  height: min(600px, 70vh);
  min-height: 420px;
  background: linear-gradient(180deg, #0d1b3d 0%, #16296b 100%);
  border-radius: 0; /* edge-to-edge reads better without the rounded "card" corners */
  margin-bottom: 2rem;
}

.evolv-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.evolv-hero-canvas svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* .evolv-hero-inner also carries the "container" class in home.html.twig, Quark2's own
   centered-column class, the same one used everywhere else on the page. That's what
   makes the hero text's left edge land at the exact same x-position as the white
   content card below, rather than the two having different margins. Only vertical
   padding and color are set here, horizontal alignment/gutters come from .container. */
.evolv-hero-inner {
  position: relative;
  z-index: 2;
  padding-top: 90px;
  padding-bottom: 90px;
  color: #ffffff;
}

.evolv-hero-text {
  max-width: 560px;
}

.evolv-hero-title {
  color: #ffffff;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.15;
  font-weight: 600;
  margin: 0 0 1rem;
}

.evolv-hero-subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.125rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.evolv-hero-cta {
  display: inline-block;
  background: #F3B3A6;
  color: #284389;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
}

.evolv-hero-cta:hover {
  opacity: 0.9;
}

@media (max-width: 640px) {
  /* Note: .evolv-hero's own min-height/70vh floor is intentionally left alone here,
     it already scales down proportionally with the shorter viewport, shrinking it
     further with a fixed px override made the hero feel small and not "immersive"
     on phones, the opposite of what full-bleed is going for. Only vertical padding
     is tightened for narrow screens, horizontal gutter still comes from .container. */
  .evolv-hero-inner {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

/* --- "Our Clients" logo strip (home.html.twig) ---
   Uniform card HEIGHT with auto width per logo, not a fixed box for every logo: that's
   what keeps a near-square mark (DeCircle Solar) from rendering tiny next to wide
   wordmark logos, the standard way real logo rows handle a mixed set of marks. */

.evolv-clients {
  margin: 1rem 0 3rem;
  text-align: center;
}

.evolv-clients-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #4A73E8;
  margin-bottom: 1.75rem;
}

.evolv-clients-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem 1.75rem;
}

.evolv-client-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  max-width: 300px;
  padding: 0 1.25rem;
  border-radius: 14px;
  border: 1.5px solid #E5E7EB;
  box-sizing: border-box;
}

.evolv-client-card--light {
  background: #FFFFFF;
}

.evolv-client-card--dark {
  background: #000000;
}

.evolv-client-card img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 480px) {
  .evolv-client-card {
    height: 64px;
    max-width: 46%;
    padding: 0 0.85rem;
  }
  .evolv-clients-grid {
    gap: 1rem 0.75rem;
  }
}

/* --- Scalable images sitewide ---
   Any image dropped into page content (including the hero-graphic
   and client-logo-strip SVGs) will resize with the viewport instead
   of overflowing or staying a fixed pixel size. */

.content-item img,
.evolv-hero-inner img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Hero split layout (used on pages with a side-by-side
   text + graphic block embedded directly in markdown content) --- */

.hero-split {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.hero-split-text {
  flex: 1 1 420px;
}
.hero-split-graphic {
  flex: 1 1 380px;
}
.hero-split-graphic img {
  width: 100%;
  height: auto;
}
@media (max-width: 768px) {
  .hero-split {
    flex-direction: column-reverse;
  }
}

/* --- Footer: quick removal option ---
   Only use this if you want the footer credit line gone entirely rather
   than replaced with Evolv's own line. Uncomment the rule below. If you'd
   rather REPLACE the text (recommended), skip this and use
   templates/partials/footer.html.twig instead, don't do both. */

/*
#footer {
  display: none;
}
*/