/* === cta-time-acc.css === */
/* Styles for CTA, Timeline, and Accordion components */

/* CTA Box (Partial: cta.html, used by test_shortcodes.md via single.html) */
/* Ensuring these styles are distinct and apply as intended */
div.cta-box { /* Added div to slightly increase specificity if needed */
    background-color: var(--blue-100);
    border: 1px solid var(--blue-200);
    border-radius: 12px;
    padding: var(--space-32);
    margin: var(--space-48) auto;
    text-align: center;
    max-width: 700px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.dark-mode div.cta-box {
    background-color: rgba(var(--blue-rgb), 0.15);
    border-color: rgba(var(--blue-rgb), 0.4);
}
div.cta-box h3 { /* Added div */
    font-size: var(--font-size-h3);
    color: var(--blue);
    margin-top: 0;
    margin-bottom: var(--space-16);
}
.dark-mode div.cta-box h3 {
    color: var(--button-primary-bg);
}
div.cta-box p { /* Added div */
    font-size: var(--font-size-lead);
    color: var(--text-secondary);
    margin-bottom: var(--space-24);
    line-height: 1.6;
}
/* Ensure button styles are picked up from marketing.css by .btn.btn-secondary */


/* Accordion ("NEW DESIGN") (Shortcode: accordion, accordion-item) */
.accordion-group {
    margin: var(--space-32) 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--divider);
}
/* Targets the .accordion-item specifically when it's inside .accordion-group */
/* This ensures it doesn't inherit unwanted padding from a generic .faq-item style in marketing.css */
.accordion-group > .accordion-item,
.accordion-group > .faq-item { /* Handles the default class from the shortcode */
    border-bottom: 1px solid var(--divider);
    padding: 0; /* Explicitly remove padding from the outer item wrapper */
}
.accordion-group > .accordion-item:last-child,
.accordion-group > .faq-item:last-child {
    border-bottom: none;
}

.accordion-header { /* Renamed from .accordion-item button to be more specific */
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--space-12) var(--space-16); /* Padding is here */
    background-color: var(--blue-100);
    color: var(--blue);
    border: none; /* Remove default button border */
    text-align: left;
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.dark-mode .accordion-header {
    background-color: rgba(var(--blue-rgb), 0.2);
    color: var(--button-primary-bg);
}
.accordion-header:hover {
    background-color: var(--blue-200);
}
.dark-mode .accordion-header:hover {
    background-color: rgba(var(--blue-rgb), 0.3);
}
.accordion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: var(--space-12);
    font-size: 20px;
    font-weight: bold;
    color: currentColor;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    order: -1; /* Icon first via CSS */
}
.accordion-icon::before {
    content: '+';
}
.accordion-header[aria-expanded="true"] .accordion-icon::before {
    content: '−';
}
/* Content area of the accordion */
.accordion-content { /* Renamed from .accordion-item > div to be more specific */
    padding: var(--space-24); /* Padding is here */
    background-color: var(--elevated-surface);
    /* `hidden` attribute is used by JS, no need for display: none here unless specifically overriding */
}
.dark-mode .accordion-content {
    background-color: var(--elevated-surface);
}
.accordion-content p:last-child {
    margin-bottom: 0;
}

/* Timeline (Shortcode: timeline, timeline-item) */
/* Ensuring these styles are distinct and apply as intended */
div.timeline { /* Added div to slightly increase specificity if needed */
    position: relative;
    margin: var(--space-32) 0;
    padding-left: var(--space-32); /* Space for the line and dots */
    list-style: none; /* Remove default list styling */
}
div.timeline::before { /* The vertical line */
    content: '';
    position: absolute;
    left: 11px; /* Position to align with the center of the dot (24px/2 - 1px border) */
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--divider);
}
.dark-mode div.timeline::before {
    background-color: var(--divider);
}
.timeline-item { /* Each item in the timeline */
    position: relative;
    margin-bottom: var(--space-32);
}
.timeline-item:last-child {
    margin-bottom: 0;
}
.timeline-dot { /* The circle on the line */
    position: absolute;
    left: 0; /* Aligns to the padding-left of .timeline */
    top: 4px; /* Adjust vertical alignment of dot */
    width: 24px;
    height: 24px;
    background-color: var(--blue);
    border-radius: 50%;
    border: 3px solid var(--background); /* Creates the "cutout" effect */
    z-index: 1; /* Ensures dot is above the line */
    transform: translateX(-50%); /* Centers the dot on the line */
    margin-left: 1px; /* Fine-tune alignment if transform doesn't perfectly center with 2px line */
}
.dark-mode .timeline-dot {
    background-color: var(--button-primary-bg);
    border-color: var(--background);
}
.timeline-content { /* Content to the right of the line/dot */
    padding-left: var(--space-24); /* Space between dot and content */
    margin-left: 12px; /* Additional offset for content if needed to align with dot center */
}
.timeline-date {
    font-weight: 600;
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}
.timeline-content h3 {
    font-size: var(--font-size-h4);
    margin-top: 0;
    margin-bottom: var(--space-8);
}
.timeline-content p:last-child {
    margin-bottom: 0;
}