/**
 * AI Readiness Page Styles
 * Shows how companies in a software category are using AI
 * URL: /{vertical}/{category-slug}/ai-readiness/
 */

/* ==========================================================================
   Page Color Override
   ========================================================================== */

body.light-theme {
    color: var(--color-primary);
}

body.light-theme .ai-input-outer .modal-form .ai-input-form-inner,
body.light-theme .ai-input-outer .modal-form,
body.light-theme .ai-input-outer .ai-input-form {
    background-color: rgb(248 249 237) !important;
}

body.light-theme #header-outer.at-top.transparent .modal-form .ai-input-form-inner {
    background-color: rgb(148 172 165 / 11%) !important;
}

body.light-theme .ai-input-outer .ai-input::placeholder {
    color: rgba(190, 189, 170, 0.8) !important;
}

#header-outer.at-top a#logo:before,
#header-outer a#logo:before {
    content: none !important;
}

#header-outer.at-top a#logo img,
#header-outer a#logo img {
    display: block !important;
}

/* ==========================================================================
   Article Container
   ========================================================================== */

.ai-readiness-article {
    margin: 0 auto;
    padding: 2rem 1rem 10rem;
    color: var(--text-primary);
}

.ai-readiness-article > * {
    max-width: var(--max-width-60);
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Top Bar (Breadcrumbs)
   ========================================================================== */

.ai-readiness-top-bar {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.ai-readiness-breadcrumbs {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-gray);
}

.ai-readiness-breadcrumbs a {
    color: var(--text-gray);
    text-decoration: none;
}

.ai-readiness-breadcrumbs a:hover {
    color: var(--text-primary);
}

.ai-readiness-breadcrumbs .separator {
    margin: 0 0.5rem;
    opacity: 0.5;
}

.ai-readiness-breadcrumbs .current {
    color: var(--text-primary);
}

/* ==========================================================================
   Article Header
   ========================================================================== */

.ai-readiness-header {
    margin: 4rem auto;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 3rem;
}

.ai-readiness-header h1 {
    font-size: 4.5rem;
    line-height: 5.5rem;
    margin-bottom: 0.5rem;
}

.ai-readiness-subtitle {
    font-size: 1.4rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.ai-readiness-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.ai-readiness-meta .reading-time {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ai-readiness-meta .reading-time::before {
    content: '';
    width: 1rem;
    height: 1rem;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23252827" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>') no-repeat center;
    background-size: contain;
    opacity: 0.3;
}

.ai-readiness-summary p {
    font-size: 1.15rem;
    line-height: 1.7;
}

/* ==========================================================================
   Section Styling
   ========================================================================== */

.ai-readiness-section {
    margin-bottom: 8rem;
}

.ai-readiness-section .section-title {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 2rem;
}

.ai-readiness-section h2:not(.section-title) {
    font-size: 1.6rem;
    line-height: 1.3;
    margin-bottom: 1.25rem;
    color: var(--text-primary);
}

/* ==========================================================================
   AI Maturity Meter
   ========================================================================== */

.ai-maturity-meter {
    margin-bottom: 2rem;
}

.meter-track {
    position: relative;
    height: 60px;
    margin-bottom: 1rem;
    clip-path: polygon(0 100%, 0 95%, 100% 0, 100% 100%);
    overflow: hidden;
}

/* Wedge background (gray unfilled portion) */
.meter-wedge-bg {
    position: absolute;
    inset: 0;
    background: #f5f4e7;
}

/* Wedge fill (gradient from light green to dark teal) */
.meter-wedge-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(90deg, #a0e6a0, #33ae8a, #2d8d8d, #285362);
    transition: width 1s ease-out;
}

/* Width applied when animated class is added by JS on scroll into view */
.ai-maturity-meter.animated[data-level="1"] .meter-wedge-fill { width: 25%; }
.ai-maturity-meter.animated[data-level="2"] .meter-wedge-fill { width: 45%; }
.ai-maturity-meter.animated[data-level="3"] .meter-wedge-fill { width: 65%; }
.ai-maturity-meter.animated[data-level="4"] .meter-wedge-fill { width: 85%; }
.ai-maturity-meter.animated[data-level="5"] .meter-wedge-fill { width: 100%; }

/* Meter labels */
.meter-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 2%;
}

.meter-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.meter-label.active {
    opacity: 1;
}

.meter-label .level-number {
    font-size: 1.3em;
    line-height: 1.2;
    color: var(--text-gray);
}

.meter-label .level-name {
    font-size: 0.75rem;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.meter-label.active .level-number {
    color: #2a6b5a;
}

.meter-label.active .level-name {
    color: #2a6b5a;
}

/* Current maturity display */
.ai-maturity-current {
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-light);
}

.maturity-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #33ae8a, #2d8d8d, #285362);
    border-radius: var(--border-radius-p);
    color: white;
    flex-shrink: 0;
}

.maturity-badge .badge-level {
    font-size: 2rem;
    line-height: 1;
}

.maturity-badge .badge-name {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.9;
}

.maturity-explanation {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   AI Use Cases Grid
   ========================================================================== */

.ai-use-cases-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5rem;
    margin-top: 4rem;
}

.ai-use-case-card {
    display: flex;
    flex-direction: column;
    background: #fcfff6;
    border-radius: var(--border-radius-p);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ai-use-case-card:hover {
    transform: translateY(-2px);
}

.use-case-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.use-case-icon .nectar_icon_wrap {
    margin: 0;
}

.use-case-icon .nectar_icon {
    margin: 0;
}

/* Override SVG icon color */
.use-case-icon svg path,
.use-case-icon .nectar_icon_wrap .svg-icon-holder[data-color="accent-color"] svg path {
    stroke: #2F9376 !important;
}

/* Fallback number styling */
.use-case-icon .use-case-number {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: var(--color-black);
    font-weight: 700;
    font-size: 1.25rem;
    border-radius: 50%;
}

.use-case-content h3 {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    color: var(--text-dark);
}

.use-case-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-body);
    margin: 0;
}

/* ==========================================================================
   AI Overview Section
   ========================================================================== */

.ai-overview-content {
    font-size: 1.1rem;
    line-height: 1.8;
}

.ai-overview-content p {
    margin-bottom: 1.5rem;
}

.ai-overview-content p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Agentic AI Section
   ========================================================================== */

.ai-agentic-overview {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.ai-agentic-overview p {
    margin-bottom: 1rem;
}

.ai-agentic-overview p:last-child {
    margin-bottom: 0;
}

.ai-agentic-use-cases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.ai-agentic-card {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 1.25rem;
}

.agentic-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.agentic-card-icon svg path,
.agentic-card-icon .nectar_icon_wrap .svg-icon-holder[data-color="accent-color"] svg path {
    stroke: var(--color-primary) !important;
}

.agentic-card-content h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.agentic-card-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-body);
    margin: 0;
}

/* ==========================================================================
   AI Evaluation Questions
   ========================================================================== */

.ai-readiness-section.ai-checklist-section {
    max-width: none;
}

.ai-evaluation-questions {
    display: flex;
    gap: 3rem;
    background: #f4f6ea;
    border-radius: 2.2rem 2.2rem 2.2rem 0;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.ai-evaluation-questions:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(/wp-content/uploads/2025/12/palomarr-bg-circles-category-10.svg) no-repeat;
    background-size: 160%;
    background-position: 150% 90%;
    opacity: 0.07;
    filter: brightness(0.5);
    z-index: 0;
}

.ai-evaluation-questions-left {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
    padding: 5rem;
}

.ai-evaluation-questions-left h3 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    line-height: 2.8rem;
}

.ai-evaluation-questions-left p {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.ai-evaluation-questions-right {
    flex: 1 1 0;
    position: relative;
    z-index: 1;
    background: #ffffff;
    padding: 3rem 3.5rem;
    border-radius: var(--border-radius-p);
}

.ai-evaluation-questions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ai-evaluation-questions li {
    padding: 1rem 0;
    position: relative;
    font-size: 1rem;
    line-height: 1.5;
    list-style: none;
}

.ai-evaluation-questions li::marker,
.ai-evaluation-questions li::before {
    display: none;
    content: none;
}

.ai-evaluation-questions li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ai-evaluation-questions li:first-child {
    padding-top: 0;
}

/* ==========================================================================
   AI Benefits / ROI Section
   ========================================================================== */

.benefits-intro {
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.ai-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.ai-benefit-card {
    padding: 1.5rem;
    border-radius: var(--border-radius-p);
    background: white;
    box-shadow: 0 3px 32px 0 #c4c3b647;
}

.benefit-stat {
    font-size: 2.5rem;
    color: var(--text-link);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.benefit-label {
    font-size: 1.1rem;
    line-height: 1.4;
    color: var(--text-link);
    margin-bottom: 0.75rem;
    text-transform: lowercase;
}

.benefit-context {
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ==========================================================================
   AI Challenges / Risks Section
   ========================================================================== */

.ai-challenges-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.ai-challenge-card {
    background: var(--color-light-2);
    border-radius: var(--border-radius-p-2);
    padding: 2.6rem 2.8rem;
}

.ai-challenge-card h3 {
    font-size: 1.7rem;
    line-height: 1.3;
    margin: 0 0 1.5rem 0;
}

.challenge-description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-body);
    margin: 0 0 1rem 0;
}

.challenge-mitigation {
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    padding: 1.2rem 1.4rem;
    background: white;
    border-radius: var(--border-radius-p);
}

.challenge-mitigation .mitigation-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 0.7rem;
}

.challenge-mitigation p:last-child {
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================================
   Future Outlook Section
   ========================================================================== */

.ai-readiness-section.ai-outlook-section h2 {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 2rem;
}

.ai-outlook-content {
    font-size: 1.1rem;
    line-height: 1.8;
}

.ai-outlook-content p {
    margin-bottom: 1.5rem;
}

.ai-outlook-content p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Promo Section
   ========================================================================== */

.ai-readiness-promo-section {
    padding-top: 3rem;
    border-top: 1px solid var(--border-light);
}

.ai-readiness-promo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.ai-readiness-promo-card {
    display: flex;
    flex-direction: column;
    padding: 3rem 4rem 4rem;
    background: var(--color-light-2);
    border-radius: var(--border-radius-p-2);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ai-readiness-promo-card:hover {
    transform: translateY(-2px);
}

.ai-readiness-promo-card .promo-card-content {
    flex: 1;
    margin-bottom: 1.5rem;
}

.ai-readiness-promo-card .promo-card-content h3 {
    font-size: 2.25rem;
    line-height: 2.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.ai-readiness-promo-card .promo-card-content p {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-dark);
}

/* ==========================================================================
   Before Footer
   ========================================================================== */

.before-footer {
    background: var(--bg-dark) !important;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 1024px) {
    .ai-use-cases-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

@media (max-width: 640px) {
    .ai-readiness-section {
        margin-bottom: 4rem;
    }

    .ai-readiness-article {
        padding: 1.5rem 1rem 5rem;
    }

    .ai-readiness-header h1 {
        font-size: 3rem;
        line-height: 3.5rem;
    }

    .ai-readiness-subtitle {
        font-size: 1.2rem;
    }

    .ai-readiness-section .section-title {
        font-size: 2.25rem;
    }

    .meter-track {
        height: 40px;
    }

    .meter-label .level-name {
        font-size: 0.5rem;
    }

    .ai-maturity-current {
        flex-direction: column;
        align-items: center;
    }

    .ai-use-cases-grid {
        grid-template-columns: 1fr;
        margin-top: 2rem;
        gap: 2rem;
    }

    .ai-benefits-grid {
        grid-template-columns: 1fr;
    }

    .ai-benefit-card {
        padding: 1.5rem;
    }

    .benefit-stat {
        font-size: 2rem;
    }

    .ai-challenge-card {
        padding: 1.5rem;
    }

    .ai-readiness-promo-grid {
        grid-template-columns: 1fr;
    }

    .ai-outlook-section {
        padding: 2rem;
    }

    .ai-agentic-section {
        padding: 0;
    }

    .ai-agentic-card {
        padding: 0;
    }

    .ai-evaluation-questions {
        flex-direction: column;
        gap: 2rem;
    }

    .ai-evaluation-questions-left {
        padding: 0;
    }

    .ai-evaluation-questions-left h3 {
        font-size: 2rem;
        line-height: 2.2rem;
    }

    .ai-evaluation-questions-right {
        padding: 1.5rem 1.6rem;
    }

    .ai-evaluation-questions:before {
        background-size: 400%;
        background-position: 80% -120%;
    }

    .ai-challenges-list {
        grid-template-columns: repeat(1, 1fr);
    }

    .ai-agentic-use-cases {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 480px) {

    .ai-agentic-card {
        flex-direction: column;
        gap: 1rem;
    }

    .agentic-card-icon {
        width: 40px;
        height: 40px;
    }
    .ai-readiness-top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .ai-readiness-breadcrumbs {
        font-size: 0.8rem;
    }

    .ai-readiness-promo-card {
        padding: 2rem;
    }

    .meter-labels {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.1rem;
        padding: 0;
    }

    .meter-label {
        flex: 0 0 auto;
    }
}