/*
Theme Name: Climate Collaborative Divi Child
Theme URI: https://africaclimatecollaborative.org
Description: Divi child theme for the Climate Collaborative site.
Author: Association of African Universities
Author URI: https://aau.org
Template: Divi
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: africa-climate-collaborative-child
*/

/* ==========================================================================
   0. BRAND FONT
   Mark Offc (Mastercard Foundation's corporate typeface) is licensed, not
   a public/Google font, so it is self-hosted via @font-face rather than
   loaded from a CDN. Drop the licensed woff2/woff files into a "fonts"
   subfolder inside this child theme and update the file names below —
   paths are relative to this stylesheet, so no PHP enqueue is needed.
   Until the files are added, the sans-serif fallbacks are used instead.
   ========================================================================== */
@font-face {
    font-family: 'Mark Offc';
    src: url('fonts/MarkOffc-Regular.woff2') format('woff2'),
         url('fonts/MarkOffc-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mark Offc';
    src: url('fonts/MarkOffc-Bold.woff2') format('woff2'),
         url('fonts/MarkOffc-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   1. BRAND TOKENS
   Africa Climate Collaborative brand kit (Toolkit, April 2026): green,
   blue and yellow, carrying the palette's intended meaning (green =
   growth/opportunity, blue = serenity/consistency, yellow = optimism).
   Every rule further down in this file references these variables, so
   changing a value here re-skins the whole theme without touching
   component rules.
   ========================================================================== */
:root {
    --cc-color-accent: #70bb66;           /* brand green — primary CTA / button color */
    --cc-color-accent-text: #101010;      /* dark text on the green accent (better contrast than white) */
    --cc-color-accent-secondary: #facd12; /* brand yellow — highlights, badges, hover accents */
    --cc-color-dark: #265d99;             /* brand blue — header / footer / dark sections */
    --cc-color-dark-text: #FFFFFF;        /* text color on top of dark (blue) sections */
    --cc-color-body-text: #101010;        /* default body copy color */
    --cc-color-muted-text: #6B6B6B;       /* secondary / caption text */
    --cc-color-surface: #FFFFFF;          /* default page background */
    --cc-color-surface-alt: #F7F5F2;      /* alternating section background */
    --cc-color-border: #E4E0D8;           /* hairlines, card borders */

    /* Brand typeface, with system fallbacks while font files are pending */
    --cc-font-heading: 'Mark Offc', Helvetica, Arial, sans-serif;
    --cc-font-body: 'Mark Offc', Helvetica, Arial, sans-serif;

    /* Structural tokens carried over from the reference site */
    --cc-container-width: 1320px;
    --cc-radius-pill: 40px;
}

/* ==========================================================================
   2. BASE TYPOGRAPHY
   Scale matches the reference site: bold/heavy headings with tight line
   height, comfortable 20px body copy.
   ========================================================================== */
body {
    font-family: var(--cc-font-body);
    font-size: 20px;
    line-height: 1.34;
    color: var(--cc-color-body-text);
    background-color: var(--cc-color-surface);
}

h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3 {
    font-family: var(--cc-font-heading);
    /* 700 (Bold) is the heaviest weight declared above. If a Black/900
       weight file for Mark Offc becomes available, add its @font-face
       block near the top of this file and raise this to 900 for a
       closer match to the reference site's heavy headings. */
    font-weight: 700;
    color: var(--cc-color-body-text);
}

h1 { font-size: 72px; line-height: 1; }
h2 { font-size: 64px; line-height: 1; margin: 40px 0; }
h3 { font-size: 24px; line-height: 1.12; }

a {
    color: var(--cc-color-accent);
}

.text-muted,
.et_pb_text .et_pb_text_inner small {
    color: var(--cc-color-muted-text);
}

/* ==========================================================================
   3. BUTTONS
   Pill-shaped, uppercase buttons in the accent color, matching the
   reference site's call-to-action style.
   ========================================================================== */
.et_pb_button,
.et_pb_promo_button,
.et_pb_more_button {
    background-color: var(--cc-color-accent);
    color: var(--cc-color-accent-text);
    border: 0;
    border-radius: var(--cc-radius-pill);
    padding: 20px 24px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 700;
    transition: opacity 0.2s ease;
}

.et_pb_button:hover,
.et_pb_promo_button:hover,
.et_pb_more_button:hover {
    background-color: var(--cc-color-accent);
    opacity: 0.85;
}

/* Brand yellow, for badges/tags/callouts — e.g. add class "cc-highlight"
   to a Divi Text module or Blurb icon wrapper. Selector is scoped to
   .et_pb_text so it out-specifies Divi's own module rules without
   needing !important. */
.et_pb_text.cc-highlight {
    background-color: var(--cc-color-accent-secondary);
    color: var(--cc-color-body-text);
    border-radius: var(--cc-radius-pill);
    padding: 4px 14px;
    display: inline-block;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
}

/* ==========================================================================
   4. LAYOUT
   Widen Divi's default row/container to match the reference site's
   1320px content width.
   ========================================================================== */
.et_pb_row,
.et_pb_section.et_pb_section_regular,
#main-content .container {
    max-width: var(--cc-container-width);
}

/* Alternating section background, for use via Divi's row/section
   "Background Color" setting or an added CSS class of .cc-surface-alt */
.cc-surface-alt {
    background-color: var(--cc-color-surface-alt) !important;
}

/* ==========================================================================
   5. HEADER (legacy/classic Divi header only)
   Targets Divi's CLASSIC default header markup (#main-header / #top-menu),
   which only renders if you're using Divi's built-in default header
   rather than a Theme Builder Global Header.

   If you build your header in Divi 5's Theme Builder (Divi > Theme
   Builder > Add Global Header) — which is what Elegant Themes now
   recommends and what divi-5-design-system-and-header-guide.md walks
   through — that header is made of real modules (Image, Menu, Button)
   and does NOT use these selectors. Style it via Design Variables and
   module settings in the Visual Builder instead; this CSS block becomes
   dead weight (harmless, but inactive) once you do that.

   Correction: an earlier version of this file set this header to the
   dark blue background as an unverified assumption. Measuring the
   reference site directly shows its header bar is actually WHITE with
   dark text and no visible nav links at all (nav lives entirely behind
   a toggle button) — fixed below. See section 12 for the full pattern.
   ========================================================================== */
#main-header {
    background-color: var(--cc-color-surface);
}

#main-header #top-menu > li > a {
    color: var(--cc-color-body-text);
    font-family: var(--cc-font-body);
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 0.02em;
}

#main-header .et_pb_menu__logo,
#main-header #logo {
    max-height: 48px;
}

/* ==========================================================================
   6. FOOTER
   Dark, full-bleed footer with a large call-to-action heading, matching
   the reference site's "Join Us" footer pattern.
   ========================================================================== */
#main-footer,
.et_pb_footer_row {
    background-color: var(--cc-color-dark);
    color: var(--cc-color-dark-text);
}

#main-footer h1,
#main-footer h2,
#main-footer h3,
.et_pb_footer_row h1,
.et_pb_footer_row h2,
.et_pb_footer_row h3 {
    color: var(--cc-color-dark-text);
}

#main-footer a,
.et_pb_footer_row a {
    color: var(--cc-color-dark-text);
}

/* ==========================================================================
   7. PARTNER SCROLLER ("Learn about the Partners")
   Pure-CSS horizontal scroller — no plugin needed. Apply the class
   "cc-partner-scroller" to a Row's CSS Class field in the Divi Builder,
   with one Blurb (or Image + Text) module per partner as its children.
   Scrolls with touch/trackpad and snaps each card into place.
   ========================================================================== */
.cc-partner-scroller.et_pb_row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 32px;
    padding-bottom: 12px; /* room for the scrollbar so it doesn't clip content */
}

.cc-partner-scroller.et_pb_row > .et_pb_column {
    flex: 0 0 220px;
    scroll-snap-align: start;
}

.cc-partner-scroller-logo img {
    /* Fixed logo box so mismatched source image sizes still line up.
       module_class puts the class on the module's wrapper div, not the
       <img> itself, hence the descendant selector. */
    height: 80px;
    width: 100%;
    object-fit: contain;
    object-position: left center;
}

/* ==========================================================================
   8. PROGRAMS AT A GLANCE (Divi Filterable Portfolio module)
   Restyles Divi's native "Filterable Portfolio" module (et_pb_portfolio)
   to match the card look measured on the reference site: rounded 30px
   thumbnail corners, off-white card background, pill-style filter
   buttons in the brand accent color.

   IMPORTANT — filtering scope: this module filters by ONE taxonomy
   (Project Category) via clickable pills. The reference site's 3
   simultaneous dropdown filters (Pillar + Partner + Country) are a
   custom-built JS feature, not something stock Divi does. To go beyond
   single-taxonomy filtering you need either a filtering plugin (e.g.
   FacetWP, JetSmartFilters) layered on Divi's "Projects" post type, or
   bespoke development — this CSS only covers what ships with Divi.
   ========================================================================== */
.et_pb_portfolio_filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}

.et_pb_portfolio_filters li {
    list-style: none;
}

.et_pb_portfolio_filters li a {
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--cc-radius-pill);
    background-color: var(--cc-color-surface-alt);
    color: var(--cc-color-body-text);
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
}

.et_pb_portfolio_filters li.active a,
.et_pb_portfolio_filters li a:hover {
    background-color: var(--cc-color-accent);
    color: var(--cc-color-accent-text);
}

.et_pb_portfolio_item {
    background-color: var(--cc-color-surface-alt);
    border-radius: 30px;
    overflow: hidden;
    padding-bottom: 24px;
}

.et_pb_portfolio_image {
    border-radius: 30px 30px 0 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.et_pb_portfolio_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.et_pb_portfolio_item h2,
.et_pb_portfolio_item .post-meta {
    padding-left: 24px;
    padding-right: 24px;
}

/* Status badge — not a native Divi field. Add a second taxonomy (e.g.
   "Project Tag") with terms Active / Coming Soon / Paused / Completed,
   then add the matching class below to that term's archive link, or
   apply manually per-card via a Code module. */
.cc-status {
    display: inline-block;
    margin: 12px 24px 0;
    padding: 4px 14px;
    border-radius: var(--cc-radius-pill);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
}
.cc-status--active       { background-color: var(--cc-color-accent);           color: var(--cc-color-accent-text); }
.cc-status--coming-soon  { background-color: var(--cc-color-accent-secondary); color: var(--cc-color-body-text); }
.cc-status--paused       { background-color: var(--cc-color-border);           color: var(--cc-color-muted-text); }
.cc-status--completed    { background-color: var(--cc-color-dark);             color: var(--cc-color-dark-text); }

/* ==========================================================================
   9. RECENT ACTIVITIES (Divi Blog module)
   Restyles Divi's native Blog module output to match the same card
   language as the Portfolio section above, for visual consistency
   between the two feeds.
   ========================================================================== */
.et_pb_blog_grid .et_pb_post {
    background-color: var(--cc-color-surface-alt);
    border-radius: 30px;
    overflow: hidden;
    padding-bottom: 24px;
}

.et_pb_blog_grid .et_pb_post .entry-featured-image-url {
    border-radius: 30px 30px 0 0;
    overflow: hidden;
    display: block;
    aspect-ratio: 16 / 9;
}

.et_pb_blog_grid .et_pb_post .entry-featured-image-url img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.et_pb_blog_grid .et_pb_post h2,
.et_pb_blog_grid .et_pb_post .post-meta,
.et_pb_blog_grid .et_pb_post .post-content {
    padding-left: 24px;
    padding-right: 24px;
}

.et_pb_blog_grid .et_pb_post .more-link {
    color: var(--cc-color-accent);
    font-weight: 700;
    text-transform: uppercase;
}

/* ==========================================================================
   10. PAGE BANNER (used on About and other inner pages)
   Split header: page title on one side, a full-bleed square photo on
   the other — matching the reference site's "About Us" banner pattern.
   Apply "cc-page-banner" to the Row's CSS Class, with two 1/2 columns:
   the first holding a Text module with the <h1>, the second holding an
   Image module with class "cc-banner-image".
   ========================================================================== */
.cc-page-banner.et_pb_row {
    align-items: stretch;
}

.cc-banner-image img {
    /* Reference site uploads a square (1:1) source and crops it — same
       approach here, so any square-ish photo fills the slot cleanly. */
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   11. YOUR CUSTOM CSS
   Add page- and module-specific overrides below this line. Because this
   stylesheet is enqueued after Divi's parent stylesheet (see
   functions.php), anything you add here automatically takes precedence
   without needing !important.
   ========================================================================== */