/*
  Avantly brand color overrides for the OLMO template.

  Source of truth: /Users/dmitriy9000/dev/gifts-manager/avantly-admin/src/pages/BrandbookPage.tsx

  How to use: load this file AFTER css/style.css (and after css/vendors.min.css)
  on every page, e.g.:
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/brand-overrides.css">

  Rationale: OLMO doesn't expose a single --primary token. Buttons/badges
  reference ~25 named-color variables (--blue, --violet-red, --stateblue,
  --green, etc.) via utility classes like .btn--blue. Across the templates
  picked for the avantly.ca rebuild (see seo-inventory/template_matching.csv),
  only a handful of those variables are actually referenced, so overriding
  them here recolors every selected page without touching any HTML markup.

  Not included here: typography. The template imports Rubik from Google
  Fonts; the brandbook specifies self-hosted Manrope. Font swap intentionally
  left out of this pass -- revisit when/if that constraint matters.
*/

:root {
  /* Brandbook typeface: self-hosted Manrope variable font (see css/fonts.css),
     replacing the template's Google-Fonts Rubik import entirely. */
  --main-font: "Manrope Variable", sans-serif;

  /* Button colors -- brandbook says Primary green is for "buttons, links, active
     nav, focus rings". Gold is an ACCENT only ("certificates, the seal knot"),
     never a button color -- so every button-producing variable maps to Primary,
     not Gold. */
  --blue: #1E7A4B;        /* was #0195ff -- default accent on about, features, pricing, FAQ, contact,
                              privacy, blog-page, blog-post, projects, project-details, team, integrations */
  --violet-red: #1E7A4B;  /* was #c73e9b -- demo-21 (home), demo-13, demo-6, demo-11, demo-4 */
  --stateblue: #1E7A4B;   /* was #6064e3 -- secondary buttons on demo-21, demo-6; also the dominant
                              button color in new-site/index.html (hero/header/pricing/newsletter CTAs) */
  --green: #0CA30C;       /* was #0fbc49 -- rating/success badges (already close to brandbook "Good") */

  /* Gold accent (brandbook: "certificates, the seal knot" -- never a button).
     --orange is unused by any button/badge class in our selected templates,
     so it's repurposed here as the dedicated accent hook: use .color--orange /
     .bg--orange in markup wherever a gold highlight is wanted (e.g. pricing
     figures), never for a .btn--* class. */
  --orange: #C98A2E;      /* was #ff8903 */

  /* Dark surfaces (footer, dark sections, mobile menu) */
  --black: #16211B;       /* was #181d27 */
  --noir: #16211B;        /* was #161821 */
  --nero: #16211B;        /* was #202431 */
  --onyx: #16211B;        /* was #1b1e2b */

  /* Light neutrals (section backgrounds) */
  --whitesmoke: #F7F6F2;  /* was #f4f4f9 */
  --snow: #F7F6F2;        /* was #fbfbfd */
  --cloud: #F7F6F2;       /* was #f8f8f8 */
  --light-gray: #F7F6F2;  /* was #f5f6f7 */

  /* Cards stay white -- no change from template default */
  --white: #FFFFFF;

  /* Hairlines / dividers */
  --smoke: #E3E0D6;       /* was #e7e7e7 */

  /* Body copy / captions */
  --text-color: #6C7268;  /* was #6c757d */
}

/* Logo sizing -- OLMO's own rules cap .desktoplogo img at a small height on
   some breakpoints (e.g. 34px between 992-1199.95px in responsive.css) and
   leave it unconstrained-but-still-small elsewhere due to the source image's
   padding. Set it explicitly here so it's predictable and bigger everywhere. */
.desktoplogo img {
  max-height: 48px;
}

.wsmobileheader .smllogo img {
  max-height: 40px;
}

img.footer-logo {
  max-height: 44px;
}

/* Blog grid cards: force a uniform image aspect ratio so card heights don't
   vary with each photo's native dimensions (the raw WP export's images are
   all different aspect ratios -- 16:9 photos next to ~4:3 diagrams/charts).
   Combined with Bootstrap's row-cols grid (which already stretches .col
   children to equal height per row), this is what actually fixes uneven
   card heights -- do NOT reach for OLMO's "masonry" layout for a listing
   page like this, that component is *designed* to produce staggered,
   uneven card heights (Pinterest-style), it's not a bug to work around. */
.blog-post-img img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}

/* Lightbox: click any product screenshot to see it full-size. */
img.zoomable {
  cursor: zoom-in;
}

#lightbox-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(22, 33, 27, 0.9);
  z-index: 9999;
  padding: 40px;
}

#lightbox-overlay.is-open {
  display: flex;
}

#lightbox-overlay #lightbox-card {
  background: #F7F6F2;
  padding: 28px;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
}

#lightbox-overlay #lightbox-img {
  max-width: 100%;
  max-height: calc(90vh - 56px);
  border-radius: 6px;
  display: block;
}

#lightbox-close {
  position: fixed;
  top: 20px;
  right: 28px;
  background: none;
  border: none;
  color: #fff;
  font-size: 42px;
  line-height: 1;
  cursor: pointer;
  z-index: 10000;
}

body.lightbox-locked {
  overflow: hidden;
}

/* Testimonials: equal-height cards with the author/logo row pinned to the
   bottom of every card, regardless of how long each quote is -- without
   this, a short quote leaves its author line sitting higher than a card
   with a longer quote next to it. */
.reviews-section .row > .col {
  display: flex;
}

.reviews-section .review-1 {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.reviews-section .review-1 .review-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.reviews-section .review-1 .review-txt {
  flex: 1;
}

.reviews-section .review-1 .author-data {
  margin-top: auto;
  padding-top: 20px;
}

/* Testimonial company logo -- reuses the same logo files as the "Trusted
   by" strip above, shown next to the author's name/title instead of a
   generic circular avatar (OLMO's .review-avatar forces border-radius:100%,
   which crops a wordmark logo badly). */
.review-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.review-logo img {
  max-height: 40px;
  max-width: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* "How it works" 4-stage process (REQUEST/GIVE/RECOVER/PROTECT): the stock
   .statistic-block markup has no bottom spacing of its own, so stages sit
   flush against the "See the full workflow" button below on desktop, and
   stack with zero gap between rows on narrower breakpoints where the row
   wraps to 2-up or 1-up. */
.statistic-section .statistic-1-wrapper .col {
  padding-bottom: 40px;
}

/* The stage title (REQUEST/GIVE/...) has no margin of its own (span.main-font
   sets none, and the following <p class="mb-0"> has no top margin either),
   so the title sat tighter against its own paragraph than the paragraph's
   own wrapped lines sit against each other (line-height: 1.72). */
.statistic-section .statistic-block-txt span.main-font {
  margin-bottom: 10px;
}

/* ==========================================================================
   DONATION ROI CALCULATOR (resources/donation_roi_calculator/)
   ========================================================================== */

.roi-card {
  padding: 36px;
}

/* Input columns are flex columns so every input lines up on the same row
   regardless of whether its own label wraps to one or two lines (e.g.
   "Donation requests / location / month" vs. "Number of locations"). */
.roi-card .row > .col {
  display: flex;
  flex-direction: column;
}

.roi-label {
  display: block;
  flex: 1;
  font-weight: 600;
  color: var(--header-color);
  margin-bottom: 8px;
}

.roi-card input.form-control {
  border: 2px solid var(--light-gray);
  border-radius: 8px;
  padding: 10px 14px;
  background-color: var(--light-gray);
}

.roi-card input.form-control:focus {
  border-color: var(--stateblue);
  box-shadow: 0 0 0 2px rgba(30, 122, 75, 0.15);
  outline: none;
}

.roi-stat {
  padding: 18px;
  text-align: center;
  height: 100%;
}

.roi-stat-label {
  display: block;
  color: var(--text-color);
  margin-bottom: 8px;
}

.roi-stat-value {
  display: block;
  font-family: var(--main-font);
  font-weight: 700;
  color: var(--header-color);
}

.roi-stat-highlight {
  border: 2px solid var(--stateblue);
}

/* The table itself reuses OLMO's own stock comparison-table component
   (the ".comp-table" pattern from pricing.html's plan-comparison grid --
   row labels as <th scope="row">, borderless cells with a border-bottom
   divider, generous 17px vertical rhythm) instead of a bespoke card, so it
   matches the rest of the theme's UI rather than inventing a new look.
   Wrapped in a plain white card here since the stock pattern normally sits
   directly on the page background, and padded out since the theme's own
   cell padding is vertical-only (17px 0, no horizontal gutter) which reads
   too cramped inside a boxed card. */
.roi-table-card {
  padding: 10px 30px;
}

.roi-table.table > :not(caption) > * > * {
  padding-left: 16px;
  padding-right: 16px;
}

.roi-table.table > :not(caption) > * > *:first-child {
  padding-left: 0;
}

.roi-table.table > :not(caption) > * > *:last-child {
  padding-right: 0;
}

.roi-table thead th {
  color: var(--header-color);
}

/* The theme's own ".comp-table tbody td/th" rule hardcodes font-size:
   1.125rem with higher specificity than a plain .fs-22px utility class, so
   the total row's emphasis needs an equally-specific override to win. */
.roi-table.table > tbody > tr.table-last-tr > th,
.roi-table.table > tbody > tr.table-last-tr > td {
  font-size: 1.25rem;
  font-weight: 600;
}

.roi-dashboard {
  background: linear-gradient(135deg, var(--stateblue), #2FA366);
  padding: 40px;
  text-align: center;
}

.roi-dash-value {
  display: block;
  font-family: var(--main-font);
  font-size: 2.25rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.roi-dash-label {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}

.roi-methodology {
  padding: 40px;
}

.roi-methodology-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 30px;
  padding-left: 0;
  margin-bottom: 25px;
}

@media (max-width: 767px) {
  .roi-methodology-list {
    grid-template-columns: 1fr;
  }
}

.roi-methodology-list li {
  border-left: 3px solid var(--stateblue);
  padding-left: 16px;
}

.roi-methodology-list li p {
  color: var(--text-color);
}

.roi-methodology-label {
  display: block;
  font-weight: 700;
  color: var(--header-color);
  margin-bottom: 4px;
}

/* Pricing page: the stock .price span styling (font-size: 3.875rem) is
   sized for a short numeric price like "$99" -- applied as-is to a
   word-based price ("Volume pricing", "Let's talk") it wraps to 2 lines
   at a huge size and overpowers the card. Scoped override for any
   .price span whose content isn't a plain number. */
.price span.price-text {
  font-size: 1.75rem;
  letter-spacing: normal;
}

/* Features page: .fbox-3 is a bare icon+text pair in the stock template
   (no background, no card look, zero padding -- designed to sit directly
   on the section background). We use it with a bg + r-12 "card" treatment
   instead, which needs its own padding since the base component has none
   -- without it the background bled right up against the icon/text with
   no breathing room. The base rule's "align-items: stretch !important"
   also stretches the icon column to match the card's full height (so a
   taller 3-line card left the icon pinned to the top instead of centered
   against the text block) -- align-self on the icon wrapper overrides
   that per-item regardless of the parent's !important. */
.fbox-3 {
  padding: 30px;
}

.fbox-3 .fbox-ico-wrap {
  align-self: center;
}

/* Pricing table checklist: the stock markup puts the checkmark icon and
   label text inline inside one <p>, with line-height:1 and no indent --
   fine for a one-line item, but a wrapped 2-line item (e.g. "Dedicated
   support, responds within 24 hrs") has its second line flush against the
   left edge under the icon instead of under the text, and the two lines
   sit flush against each other with no breathing room. Flexbox puts the
   icon in its own fixed column so wrapped text indents under itself, not
   under the icon. */
.pricing-features li p {
  display: flex;
  align-items: flex-start;
  line-height: 1.4;
}

.pricing-features li p span {
  flex: 0 0 auto;
  line-height: 1.4;
}

/* Pricing cards: the 3 tiers have genuinely different feature-list lengths
   (5 vs. 6 vs. 6 items), so the stock markup -- no height/flex rules of its
   own -- left them at different heights with the "Book a demo"/"Contact
   sales" buttons landing at different vertical positions across the row.
   Stretch each .col to the row's full height, make the card itself a flex
   column, and pin the button to the bottom with margin-top:auto so the 3
   buttons always line up regardless of list length. */
.pricing-1-wrapper .row > .col {
  display: flex;
}

.pricing-1-table {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.pricing-1-table .pt-btn {
  margin-top: auto;
}

/* Case study hero: Catch_logo.png has a flat white background baked in (no
   transparency), so placed bare on the hero's light-gray gradient it read
   as a mismatched white rectangle rather than a logo. Framing it in its own
   white card (same shadow/radius language as the page's stat cards) turns
   that into a deliberate "logo badge" instead, and gives room to size the
   logo up without making the mismatch more obvious. */
.case-study-logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 32px;
  margin-bottom: 28px;
}

.case-study-logo-badge img {
  max-height: 72px;
  width: auto;
  display: block;
}

/* Compare Solutions page: numbered "what to evaluate" list -- plain <ol>
   with brand-colored numerals instead of the browser default, matching the
   fs-18px body type used elsewhere on the page. */
.roi-methodology-numbered {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  counter-reset: roi-eval;
}

.roi-methodology-numbered li {
  position: relative;
  padding-left: 40px;
  margin-bottom: 18px;
  counter-increment: roi-eval;
}

.roi-methodology-numbered li::before {
  content: counter(roi-eval) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--stateblue);
}

/* Compare Solutions page: the comparison table's Avantly column (always the
   2nd cell in each row -- 1st is the row-label <th>) gets a light brand tint
   so it reads as the reference column at a glance, matching the already-
   bolded/colored "Avantly" header cell. */
.compare-table tbody th:nth-child(2),
.compare-table tbody td:nth-child(2) {
  background-color: rgba(30, 122, 75, 0.06) !important;
  font-weight: 600;
}

.compare-fit-avantly {
  border: 2px solid var(--stateblue);
}

/* Compare Solutions page: the status icons in the comparison table
   (flaticon-check-1/cancel-1/exclamation-mark) butt directly against their
   label text with no gap -- the icon font has no inherent side-bearing and
   the table cells don't inherit .pricing-features' icon-spacing rule since
   they're plain <td>s, not that component. */
.compare-table td span[class*="flaticon-"],
.compare-table th span[class*="flaticon-"] {
  margin-right: 8px;
}

/* Use Cases hub: 3 trailing "go deeper" links need a gap between them --
   plain adjacent .btn elements have no spacing of their own. */
.use-cases-more-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* Equal-height .fbox-3 cards with a bottom-pinned CTA (same pattern as the
   pricing cards): .col stretches to the row's tallest card (Bootstrap's
   default row is already display:flex, this just makes .col itself a flex
   container so its single .fbox-3 child stretches too), then .fbox-txt
   becomes a flex column so its own trailing .btn can be pushed to the
   bottom with margin-top:auto regardless of how long the description runs.
   Scoped broadly (not just the Use Cases hub) since .fbox-3 cards with no
   button elsewhere are unaffected -- there's no .btn for margin-top:auto to
   apply to. */
.fbox-3-wrapper .row > .col {
  display: flex;
}

.fbox-3-wrapper .fbox-3 {
  width: 100%;
}

.fbox-3 .fbox-txt {
  display: flex;
  flex-direction: column;
}

.fbox-3 .fbox-txt .btn {
  margin-top: auto;
}

/* ripple-lp hero: the stock ".title-01 p { margin: 14px 0 0; }" rule
   hardcodes margin-bottom to 0 with higher specificity than a plain
   ".mb-30" utility class, leaving no gap between the hero paragraph and
   the CTA button directly below it. */
.title-01 p.mb-30 {
  margin-bottom: 30px;
}

/* Homepage hero background: the stock hero-21.jpg is a pale lavender/violet
   gradient (template default), off-brand next to Avantly's green identity.
   Recoloring the actual JPEG isn't practical (it's a baked photo, not a flat
   color), so the image moves onto a ::before layer with a hue-rotate filter
   that shifts its hue from violet (~240deg) to the brandbook green (~149deg)
   while keeping the same pale, low-saturation tone -- filter can't be applied
   directly to .hero-21 itself without also dimming the headline/CTA text and
   dashboard screenshot it contains. */
.hero-21 {
  position: relative;
  background-image: none;
}

.hero-21::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../images/hero-21.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  filter: hue-rotate(-91deg) saturate(0.45);
  z-index: 0;
}

.hero-21 > .container-xl {
  position: relative;
  z-index: 1;
}

/* "Founding Partner Program" banner (shared by the homepage, Features,
   About, the Catch Hospitality case study, and Pricing): same off-brand
   violet problem as the hero, same fix -- bg-08.jpg's baked-in diagonal
   pattern moves onto a ::before with a hue-rotate filter, shifting its
   violet (~hue 255deg) to the brandbook dark green (~hue 150deg). Scoped
   to .banner-1-full specifically (not bare .bg-08) so this doesn't quietly
   recolor some other, unrelated future use of the bg-08 utility class. */
.bg-08.banner-1-full {
  position: relative;
  background-image: none;
}

.bg-08.banner-1-full::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../images/bg-08.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  filter: hue-rotate(-105deg) saturate(1.1);
  z-index: 0;
}

.bg-08.banner-1-full > .container-xl {
  position: relative;
  z-index: 1;
}