/*
 Theme Name:  ACP Alloy Child
 Description: Client-specific overrides for Accelerated Cure Project.
 Author:      Culture Foundry
 Template:    alloy-core
Version:     1.2.20
*/

@import url("https://use.typekit.net/vyx7mnn.css");

:root {
    /* ==========================================================================
       1. BRAND IDENTITY (Tailwind Colors)
       Derived from Accelerated Cure Project's signature Blue/Grey branding.
       ========================================================================== */

    /* The main signature Blue */
    --brand-primary:     #1E6592;

    /* Dark Navy - used for footers and high-contrast text */
    --brand-secondary:   #10223C;

    /* Brand Accent - used for CTAs and "Learn More" elements */
    --brand-accent:      #066AAB;

    /* Default body text - deep grey for readability */
    --brand-text:        #333333;


    /* ==========================================================================
       2. TYPOGRAPHY (Block Editor Sync)
       The site heavily features clean, modern sans-serif fonts.
       ========================================================================== */

    /* Heading Font - Montserrat or similar high-impact sans-serif */
    --heading-font:      "itc-avant-garde-gothic-pro", sans-serif;
    --poppins-font:      "itc-avant-garde-gothic-pro", sans-serif;

    /* Body Font - Open Sans or system-standard sans-serif */
    --body-font:         "proxima-nova", sans-serif;
    --roboto-font:         "proxima-nova", sans-serif;

    /* Tailwind Aliases */
    --font-heading:      var(--heading-font);
    --font-body:         var(--body-font);


    /* ==========================================================================
       3. SURFACE & BACKGROUNDS
       ========================================================================== */

    /* Pure white site background */
    --brand-background:  #FFFFFF;

    /* Very light grey for section separation */
    --color-surface:     #E3E3E4;


    /* ==========================================================================
       4. LAYOUT & GRID
       ========================================================================== */

    /* standard container width for modern nonprofit layouts */
    --container-content: 1200px;

    /* Rounded corners for buttons and cards per modern ACP branding */
    --radius-standard:   4px;


    /* ==========================================================================
       5. WORDPRESS SPACING PRESETS
       ========================================================================== */

    --wp--preset--spacing--60: 2rem;
    --wp--preset--spacing--70: 4rem;
    --wp--preset--spacing--80: 6rem;
}
/* Keep Forminator submit buttons visually consistent with ACP CTAs sitewide. */
.forminator-ui .forminator-button.forminator-button-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 10rem;
    padding: 0.875rem 2rem;
    border: 0;
    border-radius: var(--radius-standard);
    background-color: #d95700;
    color: #fff;
    font-family: var(--heading-font);
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.forminator-ui .forminator-button.forminator-button-submit:hover,
.forminator-ui .forminator-button.forminator-button-submit:focus {
    background-color: #b94700;
    color: #fff;
}

/* Keep Content Split blocks inside popups compact and consistent. */
.pum-container .alloy-content-split > .max-w-screen-xl {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Give Forminator forms comfortable spacing while aligning them with content. */
.entry-content .forminator-ui {
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(2.25rem, 5vw, 4.5rem) clamp(1.25rem, 5vw, 4.5rem);
    background: #fff;
}

.entry-content .forminator-ui > .forminator-row {
    margin-bottom: 2rem;
}

.entry-content .forminator-ui > .forminator-row:last-of-type {
    margin-bottom: 0;
}

.forminator-ui .forminator-label {
    display: inline-block;
    margin-bottom: 0.5rem;
    color: #405866;
    font-weight: 700;
}

.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea {
    box-sizing: border-box;
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
}

.forminator-ui .forminator-textarea {
    min-height: 9rem;
}

.forminator-ui .forminator-radio {
    margin-top: 0.75rem;
}

/* Keep embedded Forminator modules clear of the viewport edges on mobile. */
@media (max-width: 767px) {
    .entry-content .forminator-ui {
        box-sizing: border-box;
        width: 100%;
        padding: 2.25rem 1.25rem 3rem;
    }

    .entry-content .forminator-ui > .forminator-row {
        margin-bottom: 1.5rem;
    }
}

/* Keep the two-line homepage hero within the narrowest supported phones. */
@media (max-width: 359px) {
    body.home .wp-block-heading.hero-line-one,
    body.home .wp-block-heading.hero-line-2 {
        font-size: 34px !important;
        line-height: 1.1 !important;
    }
}

/* Keep the custom Inclusive Research Resources archive introduction legible
 * and visually attached to its heading. */
.alloy-resource-intro {
    max-width: 58rem;
    margin-top: 1rem;
    color: #52616f;
    font-size: 1.125rem;
    line-height: 1.65;
}

.alloy-resource-intro p {
    margin: 0;
}

/* Give ACP's default light-gray block surface a little more separation from
 * white while retaining a neutral, low-contrast background. */
.bg-gray-50 {
    background-color: #f1f5f9 !important;
}

/* Keep tightly-grouped Content Cards blocks visually connected wherever
 * editors use the no-bottom-padding design-control option. */
.alloy-design-control.pb-0:not(.pt-0) .alloy-content-cards > .max-w-screen-xl > .grid {
    margin-bottom: 1rem !important;
}

/* Use the accessible light-blue card heading color on dark brand surfaces. */
.alloy-content-cards.bg-secondary .alloy-card-title {
    color: #a0c1d9 !important;
}

.alloy-content-cards.bg-secondary .alloy-card-title a,
.alloy-content-cards.bg-secondary .alloy-card-title a:hover,
.alloy-content-cards.bg-secondary .alloy-card-title a:focus-visible {
    color: #a0c1d9 !important;
}

/* Give outlined card buttons on dark brand surfaces an accessible light-blue
 * outline and label. */
.alloy-content-cards.bg-secondary a.alloy-btn {
    background-color: transparent !important;
    border: 1px solid #a0c1d9 !important;
    color: #a0c1d9 !important;
}

.alloy-content-cards.bg-secondary a.alloy-btn * {
    color: #a0c1d9 !important;
    -webkit-text-fill-color: #a0c1d9 !important;
}

.alloy-content-cards.bg-secondary a.alloy-btn:hover,
.alloy-content-cards.bg-secondary a.alloy-btn:focus-visible {
    background-color: #a0c1d9 !important;
    border-color: #a0c1d9 !important;
    color: #10223c !important;
}

.alloy-content-cards.bg-secondary a.alloy-btn:hover *,
.alloy-content-cards.bg-secondary a.alloy-btn:focus-visible * {
    color: #10223c !important;
    -webkit-text-fill-color: #10223c !important;
}

/* Use ACP's accessible filled CTA treatment for every image CTA block. */
.alloy-cta-image a.alloy-btn {
    background-color: var(--alloy-button-bg, #c94f00) !important;
    border: 1px solid var(--alloy-button-bg, #c94f00) !important;
    color: #fff !important;
}

.alloy-cta-image a.alloy-btn * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.alloy-cta-image a.alloy-btn:hover,
.alloy-cta-image a.alloy-btn:focus-visible {
    background-color: var(--alloy-button-hover-bg, #066aab) !important;
    border-color: var(--alloy-button-hover-bg, #066aab) !important;
    color: #fff !important;
}

.alloy-cta-image a.alloy-btn:hover *,
.alloy-cta-image a.alloy-btn:focus-visible * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Keep card CTAs aligned at the bottom of each Content Cards grid row
 * throughout the ACP site. */
.alloy-content-cards .grid > .flex.flex-col {
    height: 100%;
}

.alloy-content-cards .grid > .flex.flex-col > div:last-child {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.alloy-content-cards .grid > .flex.flex-col > div:last-child > .mt-4 {
    margin-top: auto;
    padding-top: 1rem;
}

/* Ignore saved Content Cards rows with no image, link, or actual card copy. */
.alloy-content-cards .grid > .flex.flex-col:not(:has(a, img, p, .alloy-card-rich-text)) {
    display: none !important;
}

/* Archive pages use the editorial title as their heading; hide the redundant
 * generic archive-type kicker for every archive, not just newsletter terms. */
.site-main > section.bg-secondary p.text-sm.font-semibold.uppercase {
    display: none;
}

body.category .mx-auto.mb-12.max-w-3xl.text-center > p.mb-2.text-sm.font-semibold.uppercase {
    display: none;
}

/* Keep archive footer CTAs readable and keyboard-focusable across archives. */
.site-main .alloy-archive-footer-cta a.alloy-btn {
    background-color: #c94f00 !important;
    border-color: #c94f00 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.site-main .alloy-archive-footer-cta a.alloy-btn:hover,
.site-main .alloy-archive-footer-cta a.alloy-btn:focus-visible {
    background-color: #a64000 !important;
    border-color: #a64000 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.site-main .alloy-archive-footer-cta a.alloy-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .alloy-content-cards > div {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .alloy-content-cards > div > .text-center {
        margin-bottom: 1.25rem !important;
    }

    .alloy-content-cards > div > .grid {
        gap: 1.5rem !important;
        margin-bottom: 0 !important;
    }

    /* Prevent hero imagery from being cropped at mobile widths. */
    .alloy-hero-visual img {
        object-fit: contain;
    }

    /* Keep testimonial type and padding proportionate on phones. */
    .alloy-testimonial-blockquote blockquote p {
        font-size: 1.2rem !important;
        line-height: 1.5;
    }

    .alloy-testimonial-blockquote > div {
        padding: 1.25rem 1rem;
    }

    /* Keep copy inside content-split blocks comfortably readable on phones. */
    .alloy-content-split .alloy-inner-blocks p {
        font-size: clamp(1rem, 4vw, 1.25rem) !important;
        line-height: 1.5;
    }

    /* Preserve complete feature-list images on mobile. */
    .alloy-feature-list-image img {
        object-fit: contain;
    }

    /* Give stacked feature blocks a clear mobile separation. */
    .alloy-feature-list-image > div {
        row-gap: 2.5rem;
    }

    .alloy-content-cards img {
        margin-bottom: 2rem;
    }

    /* Separate hero imagery from its heading on mobile. */
    .alloy-hero-visual img {
        margin-bottom: 1rem;
    }

    /* Keep paired mobile CTAs consistently sized and center their labels. */
    main div[class*="flex-col"][class*="space-y-4"] > a.alloy-btn {
        justify-content: center;
        max-width: 22rem;
        text-align: center;
        width: 100%;
    }

    body .alloy-hero-visual .flex.flex-wrap.items-center.gap-4 > a {
        justify-content: center;
        max-width: 22rem;
        text-align: center;
        width: 100%;
    }
}