/* =====================================================================
   OK RESOURCES + EMAIL FORM STYLES
   Loaded on the Resources page and on any page where the
   [ok_email_form] shortcode is rendered. Loaded conditionally
   via ok_enqueue_resources_styles() in functions.php.

   Uses existing brand variables with fallbacks so the file works
   whether or not the variables are declared in global stylesheets.
   ===================================================================== */

/* --- Resources intro -------------------------------------------------- */

.ok-resources-intro {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.ok-resources-intro p {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--ok-text, #FFFFFF);
    opacity: 0.85;
    margin: 0;
}

/* --- Resource cards grid --------------------------------------------- */

.ok-resources-cards-section {
    padding-top: 0;
    padding-bottom: 80px;
}

.ok-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    align-items: stretch;
}

.ok-resource-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 32px;
    display: flex;
    flex-direction: column;
}

.ok-resource-card-primary {
    border-color: var(--ok-red, var(--ok-accent));
    box-shadow: 0 8px 30px rgba(30, 30, 33, 0.08);
}

.ok-resource-card-soon {
    opacity: 0.85;
}

.ok-resource-card-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ok-red, var(--ok-accent));
    margin-bottom: 14px;
}

.ok-resource-card-soon .ok-resource-card-eyebrow {
    color: rgba(255, 255, 255, 0.55);
}

.ok-resource-card-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.25;
    margin: 0 0 14px;
    color: var(--ok-text, #FFFFFF);
}

.ok-resource-card-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--ok-text, #FFFFFF);
    opacity: 0.85;
    margin: 0 0 18px;
}

.ok-resource-card-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}

.ok-resource-card-bullets li {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.94rem;
    line-height: 1.55;
    color: var(--ok-text, #FFFFFF);
    opacity: 0.78;
    padding-left: 22px;
    position: relative;
    margin-bottom: 8px;
}

.ok-resource-card-bullets li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ok-red, var(--ok-accent));
}

.ok-resource-card-soon .ok-resource-card-bullets li:before {
    background: rgba(255, 255, 255, 0.35);
}

.ok-resource-card-form-wrap {
    margin-top: auto;
}

.ok-resource-card-soon-badge {
    margin-top: auto;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--ok-text, #FFFFFF);
    opacity: 0.75;
    text-align: center;
}

/* --- Email form ------------------------------------------------------- */

.ok-email-form-wrap {
    width: 100%;
}

.ok-email-form {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 22px;
}

.ok-email-form-header {
    margin-bottom: 16px;
}

.ok-email-form-headline {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 6px;
    color: var(--ok-text, #FFFFFF);
}

.ok-email-form-body {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--ok-text, #FFFFFF);
    opacity: 0.78;
    margin: 0;
}

.ok-email-form-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ok-email-form-group {
    display: flex;
    flex-direction: column;
}

.ok-email-form-group label {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ok-text, #FFFFFF);
    opacity: 0.7;
    margin-bottom: 6px;
}

.ok-email-form-group input {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.98rem;
    padding: 11px 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: var(--ok-text, #FFFFFF);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ok-email-form-group input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.ok-email-form-group input:focus {
    border-color: var(--ok-red, var(--ok-accent));
    background: rgba(255, 255, 255, 0.08);
}

.ok-email-form-submit {
    width: 100%;
    margin-top: 6px;
}

.ok-email-form-note {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--ok-text, #FFFFFF);
    opacity: 0.6;
    margin: 8px 0 0;
}

.ok-email-form-success {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ok-text, #FFFFFF);
    background: rgba(230, 57, 70, 0.12);
    border: 1px solid var(--ok-red, var(--ok-accent));
    border-radius: 8px;
    padding: 16px;
    margin-top: 12px;
}

.ok-email-form-success a {
    color: var(--ok-red, var(--ok-accent));
    text-decoration: underline;
}

/* --- Resources page bottom CTA --------------------------------------- */

.ok-resources-cta-section {
    padding: 80px 0;
}

.ok-resources-cta-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    margin: 0 0 14px;
    color: var(--ok-text, #FFFFFF);
}

.ok-resources-cta-body {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--ok-text, #FFFFFF);
    opacity: 0.82;
    margin: 0 0 26px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.ok-resources-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.ok-btn-secondary {
    background: transparent !important;
    border: 1px solid var(--ok-red, var(--ok-accent)) !important;
    color: var(--ok-red, var(--ok-accent)) !important;
}

.ok-btn-secondary:hover {
    background: var(--ok-red, var(--ok-accent)) !important;
    color: #FFFFFF !important;
}

/* --- Light mode override --------------------------------------------- */

html[data-theme='light'] .ok-resource-card {
    background: rgba(26, 26, 46, 0.04);
    border-color: rgba(26, 26, 46, 0.1);
}

html[data-theme='light'] .ok-resource-card-primary {
    border-color: var(--ok-red, var(--ok-accent));
}

html[data-theme='light'] .ok-resource-card-title,
html[data-theme='light'] .ok-resource-card-desc,
html[data-theme='light'] .ok-resource-card-bullets li,
html[data-theme='light'] .ok-resource-card-soon-badge,
html[data-theme='light'] .ok-email-form-headline,
html[data-theme='light'] .ok-email-form-body,
html[data-theme='light'] .ok-email-form-group label,
html[data-theme='light'] .ok-email-form-group input,
html[data-theme='light'] .ok-email-form-note,
html[data-theme='light'] .ok-email-form-success,
html[data-theme='light'] .ok-resources-cta-title,
html[data-theme='light'] .ok-resources-cta-body,
html[data-theme='light'] .ok-resources-intro p {
    color: #1A1A2E;
}

html[data-theme='light'] .ok-email-form {
    background: rgba(26, 26, 46, 0.04);
    border-color: rgba(26, 26, 46, 0.1);
}

html[data-theme='light'] .ok-email-form-group input {
    background: #FFFFFF;
    border-color: rgba(26, 26, 46, 0.18);
}

html[data-theme='light'] .ok-email-form-group input::placeholder {
    color: rgba(26, 26, 46, 0.4);
}

html[data-theme='light'] .ok-resource-card-soon-badge {
    background: rgba(26, 26, 46, 0.04);
    border-color: rgba(26, 26, 46, 0.18);
}

/* --- Interactive tool cards ----------------------------------------- */

.ok-tools-tiles-section {
    padding-bottom: 40px;
}

.ok-tool-tile {
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ok-tool-tile:hover,
.ok-tool-tile:focus-visible {
    border-color: var(--ok-red, var(--ok-accent));
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(230, 57, 70, 0.14);
}

.ok-tool-tile:focus-visible {
    outline: 2px solid var(--ok-red, var(--ok-accent));
    outline-offset: 4px;
}

.ok-tool-tile .ok-resource-card-desc {
    margin-bottom: 22px;
}

.ok-tool-tile-cta {
    margin-top: auto;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    /* Text color for contrast safety on both themes; the red lives in the
       underline accent and the hover state of the whole tile. */
    color: var(--ok-text, #FFFFFF);
    text-decoration: underline;
    text-decoration-color: var(--ok-red, var(--ok-accent));
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* Coming-soon and download cards should hug their content instead of
   stretching to the tallest card in the row (the Kit embed card is tall). */
.ok-resources-cards-section .ok-resources-grid {
    align-items: start;
}

html[data-theme='light'] .ok-tool-tile {
    background: rgba(26, 26, 46, 0.04);
    border-color: rgba(26, 26, 46, 0.1);
}

html[data-theme='light'] .ok-tool-tile:hover,
html[data-theme='light'] .ok-tool-tile:focus-visible {
    border-color: var(--ok-red, var(--ok-accent));
}

/* --- Mobile responsive ----------------------------------------------- */

@media (max-width: 720px) {
    .ok-resources-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .ok-resource-card {
        padding: 24px;
    }
    .ok-resources-cta-title {
        font-size: 1.6rem;
    }
    .ok-resources-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
}

/* --- Contrast-safe eyebrow accents (2026-07-19) ----------------------
   0.72rem uppercase labels need 4.5:1. Brand red var(--ok-accent) sits just under
   that on both themes at this size, and the old 55% white "coming soon"
   label disappeared entirely on the light theme. */
html[data-theme='dark'] .ok-resource-card-eyebrow {
    color: var(--ok-accent);
}
html[data-theme='light'] .ok-resource-card-eyebrow {
    color: var(--ok-link);
}
html[data-theme='dark'] .ok-resource-card-soon .ok-resource-card-eyebrow {
    color: rgba(255, 255, 255, 0.72);
}
html[data-theme='light'] .ok-resource-card-soon .ok-resource-card-eyebrow {
    color: rgba(26, 26, 46, 0.65);
}

/* --- Legacy homepage-blocks guard (2026-07-19) ------------------------
   ok-homepage-blocks.css full-bleeds .page-id-83 sections with 100vw for
   the OLD Gutenberg homepage (a draft on production). On staging the Free
   Tools page happens to have ID 83, which caused 7px of horizontal
   overflow. Whatever ID this page has, the template class wins it back. */
.page-template-page-resources .ok-header,
.page-template-page-resources .ok-section,
.page-template-page-resources .ok-hero,
.page-template-page-resources .ok-proof-strip,
.page-template-page-resources .ok-email-section,
.page-template-page-resources .ok-footer {
    width: 100% !important;
    margin-left: 0 !important;
}

/* The actual free Kit embed supplies inline blue styles. Keep its form and
   required Kit branding intact while applying the approved site palette. */
html[data-theme] .ok-resource-card { background: var(--ok-card-bg); }
.ok-resource-card-soon { opacity: 1; }
.ok-kit-form-embed .formkit-form { max-width: 100%; }
.ok-kit-form-embed .formkit-input {
    background: var(--ok-bg) !important;
    color: var(--ok-text) !important;
    border-color: var(--ok-border) !important;
    font-family: var(--ok-sans) !important;
}
.ok-kit-form-embed .formkit-input::placeholder { color: var(--ok-text-muted) !important; opacity: 1; }
.ok-kit-form-embed .formkit-submit {
    background: var(--ok-accent) !important;
    color: var(--ok-accent-ink) !important;
    font-family: var(--ok-sans) !important;
}
.ok-kit-form-embed .formkit-submit:hover,
.ok-kit-form-embed .formkit-submit:focus-visible { background: var(--ok-accent-hover) !important; color: var(--ok-accent-ink) !important; }
/* Beat the older global span colors on the provider's actual nested label. */
html[data-theme] .ok-kit-form-embed .formkit-form .formkit-submit > span { background: transparent !important; color: inherit !important; }
.ok-kit-form-embed .formkit-submit:focus-visible,
.ok-kit-form-embed .formkit-input:focus-visible { outline: 2px solid var(--ok-text) !important; outline-offset: 3px !important; }

/* Provider success/error colors need the same contrast as the form. Keep
   their visibility and message behavior intact, including alerts beside it. */
html[data-theme] .ok-kit-form-embed .formkit-alert:is(.formkit-alert-success, .formkit-alert-error) {
    background: var(--ok-surface) !important;
    color: var(--ok-text) !important;
    border-color: var(--ok-border) !important;
    font-family: var(--ok-sans) !important;
    overflow-wrap: anywhere;
}
/* The status classes also outrank the global span/p/li !important rules. */
html[data-theme] .ok-kit-form-embed .formkit-alert:is(.formkit-alert-success, .formkit-alert-error) :is(p, li, span, strong, em, a) {
    background: transparent !important;
    color: inherit !important;
}
html[data-theme] .ok-kit-form-embed .formkit-alert:is(.formkit-alert-success, .formkit-alert-error) a {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
html[data-theme] .ok-kit-form-embed .formkit-alert:is(.formkit-alert-success, .formkit-alert-error) a:focus-visible {
    outline: 2px solid var(--ok-text) !important;
    outline-offset: 3px !important;
}

/* Resources component contract. Legacy section/navy/opacity rules above and
   in theme-override.css must not alter the approved surfaces or reading text.
   Keep this scoped: the stylesheet also loads for the homepage signup. */
html[data-theme] .page-template-page-resources .ok-section-alt {
    background-color: var(--ok-surface-alt) !important;
}
html[data-theme] .page-template-page-resources .ok-resource-card {
    background: var(--ok-surface) !important;
    border-color: var(--ok-border);
}
html[data-theme] .page-template-page-resources .ok-resource-card-primary,
html[data-theme] .page-template-page-resources .ok-tool-tile:is(:hover, :focus-visible) {
    border-color: var(--ok-accent);
}
html[data-theme] .page-template-page-resources .ok-tool-tile:is(:hover, :focus-visible) {
    box-shadow: 0 10px 30px rgba(30, 30, 33, 0.1);
}
html[data-theme] .page-template-page-resources :is(.ok-resources-intro p, .ok-resources-cta-body) {
    font-family: var(--ok-body) !important;
    font-weight: 400;
    color: var(--ok-text) !important;
    opacity: 1;
}
html[data-theme] .page-template-page-resources :is(.ok-resource-card-desc, .ok-resource-card-bullets li, .ok-resource-card-soon-badge) {
    font-family: var(--ok-sans) !important;
    font-weight: 400;
    color: var(--ok-text-muted) !important;
    opacity: 1;
}
html[data-theme] .page-template-page-resources .ok-resource-card-soon-badge {
    background: var(--ok-surface-alt);
    border-color: var(--ok-border);
}
html[data-theme] .page-template-page-resources .ok-resource-card-soon .ok-resource-card-eyebrow {
    color: var(--ok-text-muted) !important;
}
html[data-theme] .page-template-page-resources .ok-resource-card-soon .ok-resource-card-bullets li::before {
    background: var(--ok-text-muted);
}
html[data-theme] .page-template-page-resources .ok-resource-card-title,
html[data-theme] .page-template-page-resources .ok-tool-tile .ok-tool-tile-cta {
    color: var(--ok-text) !important;
}
html[data-theme] .page-template-page-resources .oki-download-copy > p:not(.ok-resource-card-desc),
html[data-theme] .page-template-page-resources .ok-resource-card-primary > p:not(.ok-resource-card-desc) {
    color: var(--ok-text) !important;
    font-family: var(--ok-body) !important;
}