/*
Theme Name: Findnaija
Theme URI: https://www.findnaija.com/
Author: HTML to WordPress conversion
Description: WordPress theme converted from the supplied findnaija HTML project.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: findnaija
*/
html { scroll-behavior: smooth; }
body.admin-bar .nav-wrap { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .nav-wrap { top: 46px; } }

/* ==========================================================================
   FindNaija brand restyle
   Palette taken from findnaija.app: green #1BA35A / #006836, gold #F1BD2F,
   soft green tint #F0FCF2. Colors only - markup and layout are untouched.
   ========================================================================== */
:root {
    --fn-green: #1ba35a;
    --fn-green-deep: #006836;
    --fn-green-darker: #00552c;
    --fn-green-ink: #0c2a1c;
    --fn-gold: #f1bd2f;
    --fn-gold-hover: #ffd04a;
    --fn-tint: #f0fcf2;

    --text-color--text-primary: var(--fn-green-ink);
    --links-text: #0b8f6e;
    --link-color--link-primary: var(--fn-green-ink);
    --text-color--text-success: var(--fn-green);
    --background-color--background-secondary: #f4faf6;
    --background-color--background-alternate: var(--fn-green-ink);
    --ðŸŽ¨-surface--backgrounds--surface-secondary: #f4faf6;
    --ðŸŽ¨-surface--backgrounds--colorful--surface-grey-green: #e8f1eb;
    --ðŸŽ¨-surface--backgrounds--colorful--surface-light-green: var(--fn-tint);
    --ðŸŽ¨-surface--backgrounds--colorful--surface-yellow: #fff6d9;
    --border-color--border-search: #dbe9e0;
    --base-color-brand--grey-400: #a4b3aa;
    --base-color-brand--grey: var(--fn-green-darker);
    --icon--icon-primary: #2a4538;
    --background-color--background-success: var(--fn-tint);
    --text-color--text-black-70: #0c2a1cb3;
}

::selection { background: var(--fn-gold); color: var(--fn-green-ink); }

:focus-visible {
    outline: 3px solid var(--fn-gold);
    outline-offset: 2px;
}

/* Headings: a little lighter and tighter suits Poppins */
html body h1, html body h2, html body .h1, html body .h2,
html body .heading-style-h1, html body .heading-style-h2, html body .heading-style-h3 {
    font-weight: 600 !important;
    letter-spacing: -0.02em;
}

/* Buttons */
.btn {
    background-color: var(--fn-green-deep);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px #0c2a1c1f;
}
.btn:hover {
    background-color: var(--fn-green-darker);
    transform: translateY(-1px);
}
.btn:where(.w-variant-09c6b176-0674-38cd-2248-85267a1ea6a7) {
    border-color: var(--fn-green);
    color: var(--fn-green-deep);
    background-color: transparent;
    box-shadow: none;
}
.btn:hover:where(.w-variant-09c6b176-0674-38cd-2248-85267a1ea6a7) {
    border-color: var(--fn-green-deep);
    background-color: var(--fn-tint);
}
.btn:where(.w-variant-527d27b1-2016-9d20-1150-9b21eab84ab5) {
    color: var(--fn-green-deep);
}

/* Navbar: brand green bar, gold call to action */
.nav-wrap .banner2_component,
.nav-wrap .nav-cont,
.nav-wrap .nav-bg,
.nav-wrap .nav-menu { background-color: var(--fn-green-deep); }
.nav-wrap .nav-cont .navbar14_button-wrapper .btn {
    background-color: var(--fn-gold);
    border-color: var(--fn-gold);
    color: var(--fn-green-ink);
    box-shadow: none;
}
.nav-wrap .nav-cont .navbar14_button-wrapper .btn:hover {
    background-color: var(--fn-gold-hover);
    border-color: var(--fn-gold-hover);
}
.nav-wrap .nav-cont .navbar14_button-wrapper .btn *  { color: var(--fn-green-ink); }
.nav-wrap .nav-link:hover,
.nav-wrap .nav-link:focus-visible,
.nav-wrap .nav-link:hover .nav-link-p,
.nav-wrap .nav-link:focus-visible .nav-link-p { color: var(--fn-gold); }

/* Footer links pick up the gold hover */
.footer-link:hover .nav-link-p { color: var(--fn-gold); }

/* Gradient accent text: green family */
[intelligence-grad] {
    background-image: linear-gradient(90deg, var(--fn-green-deep), var(--fn-green) 60%, #7ac143);
}

/* Inline SVG gradients that were hard-coded blue */
stop[stop-color="#476ADB" i], stop[stop-color="#466ADB" i] { stop-color: var(--fn-green); }
stop[stop-color="#708DEC" i] { stop-color: #5fd38d; }

/* Button variants must come after the base rules above */
.btn:where(.w-variant-527d27b1-2016-9d20-1150-9b21eab84ab5) {
    background-color: #fff;
    color: var(--fn-green-deep);
    box-shadow: 0 1px 2px #0c2a1c14;
}
.btn:hover:where(.w-variant-527d27b1-2016-9d20-1150-9b21eab84ab5) {
    background-color: var(--fn-tint);
    box-shadow: 0 4px 14px #0c2a1c1a;
}
.btn:where(.w-variant-ae219843-c442-b3dc-384e-98952efb2dd6) {
    background-color: transparent;
    color: #fff;
    border-color: #ffffff59;
    box-shadow: none;
}
.btn:hover:where(.w-variant-ae219843-c442-b3dc-384e-98952efb2dd6) {
    background-color: #ffffff1a;
    border-color: #ffffff99;
}

/* Footer: deep brand green instead of neutral charcoal */
.section_footer {
    background-color: var(--fn-green-ink);
    background-image:
        radial-gradient(ellipse 60% 80% at 85% 0%, #1ba35a33, transparent 70%),
        radial-gradient(ellipse 50% 60% at 0% 100%, #f1bd2f14, transparent 70%),
        linear-gradient(160deg, #0c2a1c 0%, #08331f 55%, #006836 160%);
    background-size: cover;
}
.section_footer .text-color-grey { color: #9cc7ae; }
.section_footer .text-color-grey-400,
.section_footer .opacity-40 { color: #b7d3c2; }
.footer-social-bl { background-color: #ffffff17; }
.footer-social-bl:hover { background-color: var(--fn-gold); color: var(--fn-green-ink); }

/* Gradient eyebrow/accent text sitting on dark sections needs a lighter ramp */
.u-bg-dark [intelligence-grad],
.text-color-white [intelligence-grad],
.section_footer [intelligence-grad] {
    background-image: linear-gradient(90deg, #8be0ae, var(--fn-gold));
}
.section_footer .opacity-40 { opacity: 0.75; }

/* Pricing cards: replace the template's lavender / peach textures with brand tints */
.pricing-cont_wrap {
    background-image: linear-gradient(160deg, #f6fcf8 0%, #e2f4e9 100%);
}
.pricing-cont_wrap.for-premium {
    background-image: linear-gradient(160deg, #fffbea 0%, #ffedb0 100%);
}

/* Hero backdrop image was light blue; rotate it to the brand green */
.home-hero-bg { filter: hue-rotate(-70deg); }
