/*
Theme Name: Kubify (Astra child)
Theme URI: https://kubify.co
Description: Kubify brand child theme for Astra. Carries the kubify.co design system: colour palette, typography, buttons, and the bespoke components (use-case cards, trust strip, stats, feature blocks, customer cards, FAQ, dark CTA, footer) from the approved mockups. Built for the Astra + Spectra (Gutenberg block) build.
Author: Kubify B.V.
Template: astra
Version: 1.0.17
License: GNU General Public License v2 or later
Text Domain: kubify-astra-child
*/

/* ============================================================
   1. Design tokens
   The eight brand tokens from the mockups, exposed as CSS
   custom properties so every rule below stays in sync.
   ============================================================ */
:root {
  --kb-green: #5D9200;
  --kb-green-dark: #4A7400;
  --kb-green-soft: #EAF2D5;
  --kb-dark: #1A1A1A;
  --kb-grey: #555555;
  --kb-light-bg: #F7F7F4;
  --kb-border: #E5E5E0;
  --kb-radius: 12px;
  --kb-radius-sm: 6px;
  --kb-container: 1140px;
}

/* ============================================================
   2. Base typography and colour
   Astra sets body font and colours through the Customizer too
   (see README). These rules guarantee the exact mockup finish
   regardless of Customizer state.
   ============================================================ */
body {
  font-family: "Inter", Calibri, "Segoe UI", system-ui, sans-serif;
  color: var(--kb-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.wp-block-heading {
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--kb-dark);
}

a { color: var(--kb-green); }
a:hover { color: var(--kb-green-dark); }

/* Astra content width, matched to the 1140px mockup container. */
.ast-container,
.site-content .ast-container {
  max-width: var(--kb-container);
}

/* ============================================================
   3. Buttons
   Styles the native Gutenberg button block, Astra buttons, and
   the optional .kb-btn helper classes. Apply "kb-btn-ghost" via
   a button block's Advanced > Additional CSS class field for the
   outlined variant.
   ============================================================ */
.wp-block-button__link,
.ast-button,
.button,
.kb-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--kb-radius-sm);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  transition: all 0.15s ease;
}

.wp-block-button__link,
.ast-button,
.kb-btn-primary {
  background: var(--kb-green);
  color: #ffffff;
}

.wp-block-button__link:hover,
.ast-button:hover,
.kb-btn-primary:hover {
  background: var(--kb-green-dark);
  color: #ffffff;
}

/* Ghost / outline button. Add class "kb-btn-ghost" to the button. */
.wp-block-button.is-style-outline .wp-block-button__link,
.kb-btn-ghost {
  background: transparent;
  color: var(--kb-dark);
  border-color: var(--kb-border);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.kb-btn-ghost:hover {
  border-color: var(--kb-green);
  color: var(--kb-green);
  background: transparent;
}

/* Ghost button placed on the dark CTA / footer. */
.kb-on-dark .kb-btn-ghost,
.kb-final-cta .kb-btn-ghost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}
.kb-on-dark .kb-btn-ghost:hover,
.kb-final-cta .kb-btn-ghost:hover {
  border-color: #ffffff;
  color: #ffffff;
}

/* ============================================================
   4. Kicker and lede
   ============================================================ */
.kb-kicker {
  display: block;
  color: var(--kb-green);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.kb-lede {
  font-size: 1.2rem;
  color: var(--kb-grey);
}

/* ============================================================
   5. Section helpers
   Spectra container blocks handle most spacing. These helpers
   reproduce the mockup rhythm when you want it on a plain group.
   ============================================================ */
.kb-section { padding: 80px 0; }
.kb-section-alt { background: var(--kb-light-bg); }

.kb-section-title {
  font-size: 2.2rem;
  text-align: center;
  margin: 0 0 16px;
}
.kb-section-sub {
  text-align: center;
  color: var(--kb-grey);
  max-width: 600px;
  margin: 0 auto 56px;
  font-size: 1.1rem;
}

/* ============================================================
   6. Trust strip
   ============================================================ */
.kb-trust {
  background: var(--kb-light-bg);
  padding: 32px 0;
  border-top: 1px solid var(--kb-border);
  border-bottom: 1px solid var(--kb-border);
}
.kb-trust .kb-label,
.kb-eyebrow {
  text-align: center;
  color: var(--kb-grey);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 600;
}
.kb-trust-logos {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  color: var(--kb-dark);
  font-weight: 600;
  font-size: 1rem;
}

/* ============================================================
   7. Badge
   Add class "kb-badge" to a small heading or paragraph.
   ============================================================ */
.kb-badge {
  display: inline-block;
  background: var(--kb-green-soft);
  color: var(--kb-green-dark);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* ============================================================
   8. Use-case cards (the three audience cards on the home page)
   Apply "kb-card" to a Spectra container or a link-wrapped group.
   ============================================================ */
.kb-card {
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius);
  padding: 32px;
  background: #ffffff;
  transition: all 0.2s ease;
  text-decoration: none;
  color: var(--kb-dark);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.kb-card:hover {
  border-color: var(--kb-green);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}
.kb-card h3 { font-size: 1.4rem; margin: 0 0 12px; letter-spacing: -0.01em; }
.kb-card p { color: var(--kb-grey); margin: 0 0 24px; flex-grow: 1; }
.kb-card .kb-arrow,
.kb-arrow { color: var(--kb-green); font-weight: 600; font-size: 0.95rem; }

/* ============================================================
   9. Feature blocks (icon circle + heading + text)
   ============================================================ */
.kb-feature { padding: 24px; }
.kb-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--kb-green-soft);
  color: var(--kb-green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 16px;
}
.kb-feature h4 { margin: 0 0 8px; font-size: 1.15rem; }
.kb-feature p { color: var(--kb-grey); margin: 0; font-size: 0.95rem; }

/* ============================================================
   10. Customer cards
   ============================================================ */
.kb-customer-card {
  padding: 24px;
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius);
  background: #ffffff;
}
.kb-customer-card .kb-org { font-weight: 700; color: var(--kb-dark); margin-bottom: 4px; }
.kb-customer-card p { margin: 0; color: var(--kb-grey); font-size: 0.95rem; }

/* ============================================================
   11. Stats band
   ============================================================ */
.kb-stat-num {
  color: var(--kb-green);
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.kb-stat-label { color: var(--kb-grey); margin-top: 8px; font-size: 0.95rem; }

/* ============================================================
   12. Testimonial cards
   ============================================================ */
.kb-testimonial-card {
  background: #ffffff;
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.kb-testimonial-card .kb-quote {
  color: var(--kb-dark);
  font-size: 1.05rem;
  font-style: italic;
  margin: 0 0 16px;
  flex-grow: 1;
}
.kb-testimonial-card .kb-who { color: var(--kb-grey); font-size: 0.95rem; margin: 0 0 20px; }

/* ============================================================
   13. FAQ questions
   ============================================================ */
.kb-question {
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--kb-border);
}
.kb-question:last-child { border-bottom: 0; padding-bottom: 0; }
.kb-q-num {
  display: inline-block;
  background: var(--kb-green);
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  text-align: center;
  line-height: 32px;
  font-weight: 700;
  margin-right: 12px;
}

/* ============================================================
   14. Cross-link strip
   ============================================================ */
.kb-cross-link {
  padding: 48px 0;
  background: var(--kb-light-bg);
  border-top: 1px solid var(--kb-border);
}
.kb-cross-link .kb-links { display: flex; gap: 32px; flex-wrap: wrap; }
.kb-cross-link a {
  color: var(--kb-dark);
  text-decoration: none;
  font-weight: 600;
  padding: 8px 0;
  border-bottom: 2px solid var(--kb-border);
  transition: border-color 0.15s ease;
}
.kb-cross-link a:hover { border-color: var(--kb-green); }

/* ============================================================
   15. Dark final CTA
   Apply "kb-final-cta" to a full-width Spectra section.
   ============================================================ */
.kb-final-cta {
  background: var(--kb-dark);
  color: #ffffff;
  padding: 80px 0;
  text-align: center;
}
/* Force white on the dark band. !important is deliberate here: Astra's
   Customizer-generated heading colour is printed late and would otherwise
   win, leaving the heading dark-on-dark. */
.kb-final-cta h2,
.kb-final-cta h3,
.kb-final-cta .wp-block-heading { color: #ffffff !important; margin: 0 0 16px; }
.kb-final-cta p {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 1.1rem;
  max-width: 580px;
  margin: 0 auto 32px;
}
/* Plain text links on the dark band (not the buttons). */
.kb-final-cta a:not(.wp-block-button__link) { color: #ffffff; }
.kb-final-cta a:not(.wp-block-button__link):hover { color: var(--kb-green-soft); }

/* ============================================================
   16. Footer (Astra footer set to dark)
   Pair with the footer background colour in the Customizer
   (see README step 6). These rules colour the text and links.
   ============================================================ */
/* Whole footer dark. The root carries the colour and every descendant is
   made transparent, so any empty Astra footer row (which would otherwise
   render white and punch a gap above the copyright bar) inherits the dark
   background instead of breaking it up. */
.site-footer { background-color: var(--kb-dark) !important; }
.site-footer * { background-color: transparent !important; }
.site-footer,
.site-footer p,
.site-footer .ast-footer-copyright,
.ast-small-footer {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.9rem;
}
.site-footer a,
.ast-small-footer a {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none;
}
.site-footer a:hover,
.ast-small-footer a:hover { color: var(--kb-green) !important; }

/* Full-bleed pages: Astra adds 60px top and bottom margin to #primary on
   plain, no-sidebar layouts at >=1200px wide, leaving a white gap above
   the hero and below the final section. Remove it so the sections, which
   carry their own spacing, sit flush against the header and footer. */
.ast-plain-container.ast-no-sidebar #primary {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* The embed figure must have an explicit width, otherwise the 16:9
   aspect-ratio spacer below computes its height from zero and the embed
   collapses. The block-margins also replace the lopsided 24px/0 that the
   global styles apply to constrained-layout children. */
.wp-block-embed {
  width: 100%;
  margin-block-start: 10px;
  margin-block-end: 10px;
}

/* Responsive video embed block. Some setups do not load WordPress core's
   aspect-ratio spacer, so the Vimeo / YouTube embed wrapper collapses to
   zero height and the iframe overlaps surrounding content. This restores
   the 16:9 spacer and lets the iframe fill it. */
.wp-block-embed.is-type-video .wp-block-embed__wrapper { position: relative; }
.wp-block-embed.is-type-video .wp-block-embed__wrapper::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.wp-block-embed.is-type-video .wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Raw iframes added via a Custom HTML block (not the embed block). */
.wp-block-html iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  border: 0;
}

/* Query Loop pagination: give the page numbers a little breathing room. */
.wp-block-query-pagination-numbers .page-numbers {
  margin-right: 10px;
}

/* News cards: push the Read more link to the bottom-left of the card so
   every card lines up, regardless of excerpt length. Relies on .kb-card
   being a flex column (it is). */
.kb-card .wp-block-post-excerpt {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.kb-card .wp-block-post-excerpt__more-link {
  margin-top: auto;
  align-self: flex-start;
  color: var(--kb-green);
  font-weight: 600;
  text-decoration: none;
}
.kb-card .wp-block-post-excerpt__more-link:hover { color: var(--kb-green-dark); }

/* Contact form (WPForms) on brand. Overrides WPForms' own styling, hence
   the !important; you can also set these colours in the WPForms block
   settings, but this keeps it consistent without per-form fiddling. */
.wpforms-container { --wpforms-button-background-color: #5D9200; --wpforms-button-background-color-alt: #4A7400; --wpforms-field-border-color: #E5E5E0; }
.wpforms-container .wpforms-field input[type="text"],
.wpforms-container .wpforms-field input[type="email"],
.wpforms-container .wpforms-field input[type="tel"],
.wpforms-container .wpforms-field input[type="url"],
.wpforms-container .wpforms-field textarea,
.wpforms-container .wpforms-field select {
  border: 1px solid var(--kb-border) !important;
  border-radius: var(--kb-radius-sm) !important;
  font-family: inherit;
}
.wpforms-container .wpforms-field input:focus,
.wpforms-container .wpforms-field textarea:focus,
.wpforms-container .wpforms-field select:focus { border-color: var(--kb-green) !important; }
div.wpforms-container button[type="submit"],
div.wpforms-container input[type="submit"],
div.wpforms-container .wpforms-form button[type="submit"],
div.wpforms-container .wpforms-form input[type="submit"],
div.wpforms-container .wpforms-submit {
  background: var(--kb-green) !important;
  background-color: var(--kb-green) !important;
  border: 0 !important;
  border-radius: var(--kb-radius-sm) !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}
div.wpforms-container button[type="submit"]:hover,
div.wpforms-container input[type="submit"]:hover,
div.wpforms-container .wpforms-submit:hover {
  background: var(--kb-green-dark) !important;
  background-color: var(--kb-green-dark) !important;
}

/* ============================================================
   Button colours, hardened. Astra's Customizer "Theme Color"
   generates button CSS (blue by default) that overrides the base
   rules in section 3, so these guarantee the brand green. Setting
   the Theme Color to #5D9200 in the Customizer is the cleaner home
   for this, but these keep it correct regardless.
   ============================================================ */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
  background-color: var(--kb-green) !important;
  color: #ffffff !important;
  border-color: var(--kb-green) !important;
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
  background-color: var(--kb-green-dark) !important;
  border-color: var(--kb-green-dark) !important;
  color: #ffffff !important;
}
/* Note: .kb-btn-ghost lands on the .wp-block-button wrapper div, so it is
   scoped to a.kb-btn-ghost here to avoid bordering both the div and the
   inner link. The block selector borders the <a>; this covers raw <a>
   helper usage. */
.wp-block-button.is-style-outline > .wp-block-button__link,
a.kb-btn-ghost {
  background-color: transparent !important;
  color: var(--kb-dark) !important;
  border: 2px solid var(--kb-border) !important;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
a.kb-btn-ghost:hover {
  color: var(--kb-green) !important;
  border-color: var(--kb-green) !important;
}
/* Ghost buttons on the dark CTA band stay white. */
.kb-final-cta .wp-block-button.is-style-outline > .wp-block-button__link,
.kb-final-cta a.kb-btn-ghost {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}
.kb-final-cta .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.kb-final-cta a.kb-btn-ghost:hover {
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* ============================================================
   Number badge and tick rendered INLINE at the start of the
   heading, the equivalent of <h3><span class="badge">1</span>
   text</h3>. The question numbers come from a CSS counter, the
   feature tick is a static glyph, and the original standalone
   badge blocks are hidden, so no markup change is needed and the
   badge lines up with the heading like normal inline content.
   ============================================================ */
.kb-section { counter-reset: kb-question; }
.kb-question { counter-increment: kb-question; }
.kb-question > .kb-q-num,
.kb-feature > .kb-icon-circle { display: none; }

.kb-question > h3::before,
.kb-feature > h4::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  vertical-align: middle;
  margin-right: 12px;
  position: relative;
  top: -0.06em;
}
.kb-question > h3::before {
  content: counter(kb-question);
  width: 32px;
  height: 32px;
  background: var(--kb-green);
  color: #ffffff;
  font-size: 0.85em;
}
.kb-feature > h4::before {
  content: "\2714";
  width: 28px;
  height: 28px;
  background: var(--kb-green-soft);
  color: var(--kb-green-dark);
  font-size: 0.8em;
}

/* ============================================================
   Branded full-width hero cover (image banner with dark overlay).
   Apply the class "kb-hero-cover" to a full-width Cover block.
   ============================================================ */
.kb-hero-cover .wp-block-cover__inner-container {
  max-width: var(--kb-container);
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
  text-align: center;
}
/* !important is required: Astra prints an inline rule,
   body .wp-block-cover:not(.has-text-color.has-link-color) p { color: var(--ast-global-color-3) }
   at specificity (0,3,2), which otherwise wins over these and leaves the
   kicker and lede grey. */
.kb-hero-cover .wp-block-heading,
.kb-hero-cover p { color: #ffffff !important; }
.kb-hero-cover .kb-kicker { color: #a6d957 !important; }
.kb-hero-cover .kb-lede { color: #ffffff !important; }
.kb-hero-cover .wp-block-button.is-style-outline > .wp-block-button__link,
.kb-hero-cover a.kb-btn-ghost {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}
/* Ghost button on the hero fills green on hover. */
.kb-hero-cover .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.kb-hero-cover a.kb-btn-ghost:hover {
  background-color: var(--kb-green) !important;
  border-color: var(--kb-green) !important;
  color: #ffffff !important;
}

/* ============================================================
   17. Header / nav finish
   ============================================================ */
.main-header-menu .menu-link:hover,
.ast-header-break-point .main-header-menu .menu-link:hover { color: var(--kb-green); }
.site-title a .kb-accent,
.site-title .kb-accent { color: var(--kb-green); }

/* ============================================================
   18. Responsive
   ============================================================ */
@media (max-width: 800px) {
  .kb-section { padding: 56px 0; }
  .kb-trust-logos { gap: 24px; }
  .kb-stat-num { font-size: 2.2rem; }
  .kb-final-cta { padding: 56px 0; }
}