/* ============================================================
   The David Dolphin Foundation for Innovation & Bioindustry
   Custom CSS Overrides
   File: /templates/shaper_onepage/css/custom.css

   WHAT THIS FILE IS FOR:
   Only rules that cannot be set in the Helix Custom Style
   or Typography tabs.
   - Base colours: set in Custom Style
   - Fonts and sizes per device: set in the Typography tab
   - Menu bar background: set in Top Bar Background Color
     (the menu sits inside the Top Bar)

   BEFORE EDITING CUSTOM STYLE COLOURS:
   Enable: Template Options > Advanced > SCSS > Compile SCSS to CSS
   Turn it OFF again once done.
   ============================================================ */


/* ── HEADING TAG SIZES (desktop baseline) ───────────────────────
   In SP Page Builder the heading tag you select (H2, H3 etc.)
   determines the rendered size. These rules set the desktop
   baseline. Per-device scaling is handled in the Typography tab
   using the device toggles — do not add media queries here.
   ──────────────────────────────────────────────────────────────*/
h2 { font-size: 38px !important; }
h3 { font-size: 26px !important; }
h4 { font-size: 20px !important; }
h5 { font-size: 16px !important; }
h6 { font-size: 13px !important; }

/* ── ACTIVE MENU ITEM BACKGROUND ────────────────────────────────
   Template default sets a bright yellow background on the active
   menu item. Removed here — active state is indicated by text
   colour only, set in Custom Style > Menu > Active Text Color.
   ──────────────────────────────────────────────────────────────*/
#sp-header .sp-megamenu-parent .sp-menu-item.active {
    background-color: transparent !important;
}
/* ── HERO SECTION ───────────────────────────────────────────────
   Hero headline uses H2 tag in SP Page Builder.
   Hero subheadline uses H3 tag or a Text Block addon.
   Set background overlay in SPPB Section > Style > Background:
     - Background image: your chosen image
     - Overlay colour: #2C3E50
     - Overlay opacity: 60%
     - Section Text Color: #FFFFFF
   The rule below is a fallback for addon titles that do not
   inherit from the section text colour setting.
   ──────────────────────────────────────────────────────────────*/
.sp-hero .sppb-addon-title,
.sp-hero .sppb-text-block p,
.sp-hero p {
    color: #FFFFFF !important;
}
/* Hero gradient overlay — compensates for light background image */
.sp-hero .sppb-section-overlay {
    background: linear-gradient(
        to right,
        rgba(44, 62, 80, 0.82) 0%,
        rgba(44, 62, 80, 0.65) 50%,
        rgba(44, 62, 80, 0.35) 100%
    ) !important;
}

/* ── H2 AMBER ACCENT LINE ───────────────────────────────────────
   Short decorative underline beneath H2 section headings.
   Pseudo-elements cannot be produced from the template UI.
   ──────────────────────────────────────────────────────────────*/
h2.sppb-addon-title::after {
    content: '' !important;
    display: block !important;
    width: 48px !important;
    height: 3px !important;
    background-color: #C17F24 !important;
    margin-top: 12px !important;
    border-radius: 2px !important;
}


/* ── UTILITY: SECTION ALTERNATE BACKGROUND ──────────────────────
   Apply by entering 'section-alt' in SP Page Builder
   Section Settings > Style > CSS Class field.
   ──────────────────────────────────────────────────────────────*/
.section-alt {
    background-color: #F5F2ED;
}


/* ── UTILITY: SECTION LABEL ─────────────────────────────────────
   Small uppercase amber label above H3 section headings.
   Use an H6 Heading addon and enter 'section-label' in
   that addon's CSS Class field.
   ──────────────────────────────────────────────────────────────*/
.section-label,
.sppb-addon-title.section-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #C17F24;
    margin-bottom: 0.5em;
}


/* ── FEATURE BOX (What We Fund) ─────────────────────────────────
   SPPB-specific classes — not reachable from Helix Custom Style.
   ──────────────────────────────────────────────────────────────*/
.sppb-feature-box .sppb-feature-box-icon {
    color: #3D7AB5 !important;
    font-size: 36px !important;
    transition: color 0.2s ease !important;
}

.sppb-feature-box:hover .sppb-feature-box-icon {
    color: #C17F24 !important;
}


/* ── TIMELINE (How We Work) ─────────────────────────────────────
   SPPB-specific classes — not reachable from Helix Custom Style.
   ──────────────────────────────────────────────────────────────*/
.sppb-timeline .sppb-timeline-dot,
.sppb-timeline .sppb-timeline-line {
    background-color: #3D7AB5 !important;
}


/* ── PERSON ADDON (Founder) ─────────────────────────────────────
   Designation text in amber gold small caps.
   ──────────────────────────────────────────────────────────────*/
.sppb-person-content .sppb-person-designation {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #C17F24 !important;
}


/* ── TESTIMONIAL CAROUSEL (Endorsements) ────────────────────────
   Italic quote styling for endorsement weight.
   ──────────────────────────────────────────────────────────────*/
.sppb-testimonial-content {
    font-style: italic !important;
    font-size: 18px !important;
    line-height: 1.8 !important;
}


/* ── BUTTONS ────────────────────────────────────────────────────
   Button base and hover colours come from Body Link Color and
   Link Hover Color in Custom Style. This adds transition
   timing and padding only.
   ──────────────────────────────────────────────────────────────*/
.sppb-btn-primary,
.btn-primary {
    padding: 12px 28px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}


/* ── CONTACT FORM ───────────────────────────────────────────────
   Warm border colour and accessible focus ring.
   ──────────────────────────────────────────────────────────────*/
.sppb-form-control {
    border: 1px solid #DDD5C8 !important;
    border-radius: 4px !important;
    transition: border-color 0.2s ease !important;
}

.sppb-form-control:focus {
    border-color: #3D7AB5 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(61, 122, 181, 0.15) !important;
}