/**
 * FRM review layout, based on the Alpha Picks / Quant Growth & Income pattern
 * Two-column layout with sticky sidebar and responsive design
 */

/* === Main Layout Structure === */
.roc-frm-review-content {
    background: #ffffff;
}

.roc-frm-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.roc-frm-body {
    flex: 1;
    min-width: 65%;
    max-width: 100%;
}

.roc-frm-sidebar {
    flex-basis: 300px;
    flex-grow: 0;
    flex-shrink: 0;
    /* Sticky positioning */
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    align-self: flex-start;
    height: fit-content;
}

/* === Post Header Styling === */
/* Match the reference's single-class priority so the site heading kit wins. */
:where(.roc-frm-header) .review-title {
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
    margin-bottom: 1rem;
}

.roc-frm-header .roc-frm-byline {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e0e0e0;
}

/* === Sidebar Promotional Box Styling === */
.roc-frm-promo-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #2563eb;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.roc-frm-promo-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.15);
}

.roc-frm-promo-photo {
    max-width: 150px;
    height: auto;
    margin-bottom: 15px;
    border-radius: 8px;
}

.roc-frm-promo-box h4 {
    color: #1a1a1a;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.roc-frm-promo-box p {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.roc-frm-promo-button {
    display: block;
    width: 100%;
    padding: 15px 20px;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.3);
}

.roc-frm-promo-button:hover {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
    text-decoration: none !important;
    color: #ffffff !important;
}



/* === Table of Contents Styling === */
.roc-frm-toc {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    max-height: 70vh;
    overflow-y: auto;
}

.roc-frm-toc-title {
    margin-top: 0;
    line-height: 1.2;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a1a;
    border-bottom: 2px solid #2563eb;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.roc-frm-toc ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.roc-frm-toc li {
    margin-bottom: 12px;
    position: relative;
    padding-left: 20px;
}

.roc-frm-toc li:before {
    content: "▶";
    position: absolute;
    left: 0;
    color: #2563eb;
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.roc-frm-toc li:hover:before {
    transform: translateX(3px);
}

.roc-frm-toc a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: color 0.2s ease;
    display: block;
}

.roc-frm-toc a:hover {
    color: #2563eb;
    text-decoration: none;
}

.roc-frm-toc .toc-h3 {
    margin-left: 15px;
    font-size: 0.9rem;
    color: #666;
}

.roc-frm-toc .toc-h3:before {
    content: "◦";
    font-size: 1rem;
}

/* === Typography for Main Content === */
.roc-frm-body h1,
.roc-frm-body h2,
.roc-frm-body h3,
.roc-frm-body h4 {
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #1a1a1a;
    line-height: 1.4;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.roc-frm-body h2 {
    font-size: 1.8rem;
    font-weight: 600;
    border-bottom: 2px solid #2563eb;
    padding-bottom: 0.5rem;
    scroll-margin-top: 80px; /* Offset for sticky header */
}

.roc-frm-body h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c3e50;
    scroll-margin-top: 80px;
}

.roc-frm-body p {
    font-family: 'Georgia', 'Times New Roman', serif;
    line-height: 1.7;
    font-size: 17px;
    margin-bottom: 1.5rem;
    color: #2c3e50;
}

.roc-frm-body ul,
.roc-frm-body ol {
    font-family: 'Georgia', 'Times New Roman', serif;
    line-height: 1.7;
    font-size: 17px;
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.roc-frm-body li {
    margin-bottom: 0.5rem;
}

/* Performance table styling */
.roc-frm-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-size: 0.95rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.roc-frm-body table th {
    background: #2563eb;
    color: white;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
}

.roc-frm-body table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e0e0e0;
}

.roc-frm-body table tr:nth-child(even) {
    background: #f8f9fa;
}

.roc-frm-body table tr:hover {
    background: #e3f2fd;
}


.roc-frm-provider-logo { display: flex; justify-content: center; align-items: center; min-height: 160px; margin: 0 0 28px; padding: 20px; border: 1px solid #c6d4e8; border-radius: 10px; background: #fff; }
.roc-frm-provider-logo img { display: block; width: 280px; height: 120px; max-width: 100%; object-fit: contain; }
.roc-frm-provider-logo .roc-frm-logo-monochrome { filter: grayscale(1); }
.roc-frm-body a { color: #1e40af; text-decoration: underline; text-underline-offset: 3px; }
.roc-frm-comparison a:focus-visible, .roc-frm-comparison summary:focus-visible, .roc-frm-comparison [tabindex]:focus-visible { outline: 3px solid #2563eb !important; outline-offset: 4px; }
.roc-frm-disclosure { border-left: 4px solid #2563eb; background: #eff6ff; padding: 20px 24px; margin: 24px 0; border-radius: 0 10px 10px 0; }
.roc-frm-disclosure p:last-child { margin-bottom: 0; }
.roc-frm-reviewed, .roc-frm-note { color: #495366; font-size: .9375rem; }
.roc-frm-offer { border: 2px solid #2563eb; border-radius: 12px; padding: 24px; margin: 28px 0; background: #eff6ff; }
.roc-frm-offer-label { color: #1e40af; font-size: .875rem; font-weight: 700; letter-spacing: .03em; }
.roc-frm-offer h3 { margin-top: 8px; }
.roc-frm-body .roc-frm-button { display: inline-block; padding: 12px 18px; margin: 5px 0; border: 2px solid #1e40af; border-radius: 7px; color: #fff; background: #1e40af; font-weight: 700; line-height: 1.5; text-align: center; text-decoration: none; }
.roc-frm-body .roc-frm-button:hover { background: #172e78; border-color: #172e78; color: #fff; }
.roc-frm-body .roc-frm-button-secondary { color: #1e40af; background: #fff; }
.roc-frm-code { display: inline-block; padding: 4px 10px; color: #172033; background: #fff; border: 1px solid #90a5c5; border-radius: 4px; font-size: 1.1rem; user-select: all; }
.roc-frm-final-links { display: flex; flex-wrap: wrap; gap: 12px; }
.roc-frm-sources { font-size: .9375rem; }
.roc-frm-sidebar[hidden] { display: none; }

/* Comparison-specific modules retain their reviewed WordPress content. */
.roc-frm-body { overflow-wrap: break-word; }
.roc-frm-promo-photo { display: block; width: 150px; height: 100px; max-width: 100%; object-fit: cover; margin: 0 auto 15px; }
.roc-frm-promo-box h4 { margin-top: 0; }
.roc-frm-toc-title { cursor: pointer; list-style: none; }
.roc-frm-toc-title::marker { content: ''; }
.roc-frm-toc-title::-webkit-details-marker { display: none; }
.roc-frm-toc details:not([open]) .roc-frm-toc-title { margin-bottom: 0; }
.roc-frm-disclosure { background: #f8f9fa; padding: 16px 20px; border-radius: 0; }
.roc-frm-body .roc-frm-reviewed, .roc-frm-body .roc-frm-note { color: #666; font-size: .9375rem; }
.roc-frm-provider-logo { border-color: #e0e0e0; border-radius: 12px; }
.roc-frm-offer { background: #f8f9fa; padding: 25px; }
.roc-frm-body .roc-frm-offer-label { font-family: 'Source Sans Pro', sans-serif; font-size: .875rem; }
.roc-frm-body .roc-frm-button { font-family: 'Source Sans Pro', sans-serif; font-size: 16px; border-radius: 8px; }
.roc-frm-table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid #e0e0e0; border-radius: 8px; margin: 2rem 0; }
.roc-frm-body table { min-width: 760px; line-height: 1.55; margin: 0; border-radius: 0; overflow: visible; box-shadow: none; }
.roc-frm-body caption { caption-side: top; color: #1a1a1a; padding: 16px; text-align: left; font-weight: 700; background: #f8f9fa; }
.roc-frm-body th, .roc-frm-body td { border: 1px solid #e0e0e0; vertical-align: top; }
.roc-frm-body tbody th { background: #f8f9fa; color: #1a1a1a; width: 17%; }
.roc-frm-body table p:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
    .roc-frm-layout { flex-direction: column; gap: 20px; }
    .roc-frm-body { min-width: 100%; order: 1; }
    .roc-frm-sidebar { flex-basis: auto; position: static; width: 100%; order: 2; margin-top: 30px; }
    :where(.roc-frm-header) .review-title { font-size: 2rem; }
    .roc-frm-promo-box, .roc-frm-toc { padding: 20px; }
    .roc-frm-toc-title::after { content: '+'; float: right; }
    .roc-frm-toc details[open] .roc-frm-toc-title::after { content: '\2212'; }
    .roc-frm-body h2 { font-size: 1.5rem; }
    .roc-frm-body h3 { font-size: 1.25rem; }
    .roc-frm-body p, .roc-frm-body ul, .roc-frm-body ol { font-size: 16px; }
}
@media (max-width: 576px) {
    .roc-frm-review-content { padding: 3rem 0; }
    .roc-frm-layout { gap: 15px; padding: 0 15px; }
    :where(.roc-frm-header) .review-title { font-size: 1.75rem; }
    .roc-frm-promo-box, .roc-frm-toc { padding: 15px; margin-bottom: 20px; }
    .roc-frm-promo-button { padding: 12px 15px; font-size: 15px; }
    .roc-frm-offer, .roc-frm-disclosure { padding: 18px; }
    .roc-frm-final-links { display: block; }
    .roc-frm-body .roc-frm-button { display: block; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .roc-frm-comparison, .roc-frm-comparison * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}