/* CHANGE LOG
   File: /var/www/html/otr.nsgia.com/static/css/otr_pages.css
   Purpose: OTR page-content components (sections, cards, thesis, markets, CTAs,
            forms) styled to match the nsgia shell (ms.css / navbar.css).
   Dependencies: loads after ms.css; uses the nsgia palette.
   Version History:
   2026-06-09 v1.0 - Initial: portal content components for the OTR multi-page site.
*/

/* palette: #2c5aa0 primary, #2a5298 deep, #3182ce link, #4a5568 slate,
   #f8f9fa canvas, #2c3e50 text, #e2e8f0 border, #edf2f7 light band */

/* --- top header additions --- */
.otr-navbar-subtitle {
    color: #4a5568;
    font-size: 0.82rem;
    font-weight: 500;
    margin-left: 12px;
    border-left: 1px solid #e2e8f0;
    padding-left: 12px;
}

/* --- page hero (interior pages: shorter than the 80vh home hero) --- */
.ms-hero--page { height: clamp(220px, 34vh, 320px); min-height: 0; }
.ms-hero--page .ms-hero-content h1 { font-size: 2.2rem; }

/* --- content width + sections --- */
.otr-wrap { max-width: 1000px; margin: 0 auto; padding: 0 28px; }
.otr-sec { padding: 44px 0; border-bottom: 1px solid #edf2f7; }
.otr-sec:last-child { border-bottom: none; }
.otr-eyebrow {
    text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem;
    font-weight: 700; color: #3182ce; margin-bottom: 10px;
}
.otr-sec h2 { color: #2c5aa0; font-size: 1.55rem; margin-bottom: 14px; font-weight: 700; }
.otr-sec h3 { color: #2d3748; font-size: 1.15rem; margin: 18px 0 8px; }
.otr-lead { font-size: 1.12rem; color: #4a5568; max-width: 760px; }
.otr-sec p { color: #2c3e50; margin-bottom: 12px; max-width: 820px; }

/* --- thesis callout --- */
.otr-thesis {
    background: #edf2f7; border-left: 4px solid #2c5aa0; border-radius: 0 8px 8px 0;
    padding: 22px 26px; font-size: 1.18rem; color: #2d3748; line-height: 1.6; max-width: 860px;
}

/* --- card grid --- */
.otr-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.otr-cards--2 { grid-template-columns: repeat(2, 1fr); }
.otr-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 24px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.otr-card h3 { color: #2c5aa0; font-size: 1.1rem; margin: 0 0 8px; }
.otr-card p { color: #4a5568; font-size: 0.95rem; margin: 0 0 12px; }
.otr-cardlink { color: #3182ce; font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.otr-cardlink:hover { text-decoration: underline; }

/* --- buttons --- */
.otr-btn {
    display: inline-block; background: #2c5aa0; color: #fff; padding: 12px 24px;
    border-radius: 6px; font-weight: 600; text-decoration: none; border: 1px solid #2c5aa0;
    font-size: 0.98rem; cursor: pointer;
}
.otr-btn:hover { background: #2a5298; }
.otr-btn--outline { background: transparent; color: #2c5aa0; }
.otr-btn--outline:hover { background: #2c5aa0; color: #fff; }
.otr-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }

/* --- report iframe (carrier) --- */
.otr-report-frame {
    width: 100%; height: 860px; border: 1px solid #e2e8f0; border-radius: 10px;
    background: #fff; margin-top: 8px;
}
.otr-report-fallback { margin-top: 12px; font-size: 0.95rem; }
.otr-report-fallback a { color: #3182ce; font-weight: 600; }

/* --- market blocks (sample markets) --- */
.otr-market {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 26px;
    margin-bottom: 22px; scroll-margin-top: 90px;
}
.otr-market h3 { color: #2c5aa0; font-size: 1.3rem; margin: 0 0 10px; }
.otr-kv { margin: 8px 0; color: #2c3e50; }
.otr-kv b { color: #2d3748; }
.otr-market .otr-cardlink { display: inline-block; margin-top: 10px; }

/* --- plain lists (credibility / greenfield) --- */
.otr-list { list-style: none; padding: 0; margin: 14px 0; max-width: 820px; }
.otr-list li { padding: 11px 0 11px 26px; border-bottom: 1px solid #edf2f7; position: relative; color: #2c3e50; }
.otr-list li:last-child { border-bottom: none; }
.otr-list li::before { content: "▸"; position: absolute; left: 0; color: #3182ce; }

/* --- claims-control note --- */
.otr-note { font-size: 0.88rem; color: #718096; font-style: italic; margin-top: 16px; max-width: 820px; }

/* --- contact form --- */
.otr-form { max-width: 600px; margin-top: 18px; }
.otr-form .otr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.otr-form input, .otr-form textarea {
    width: 100%; padding: 11px 13px; border: 1px solid #cbd5e0; border-radius: 6px;
    font-family: inherit; font-size: 0.96rem; margin-bottom: 14px; background: #fff; color: #2c3e50;
}
.otr-form textarea { min-height: 110px; resize: vertical; }
.otr-form-ok {
    background: #e6fffa; border: 1px solid #38b2ac; color: #234e52;
    padding: 12px 16px; border-radius: 6px; margin-bottom: 16px;
}
.otr-contact-meta { margin-top: 24px; color: #2c3e50; }
.otr-contact-meta a { color: #3182ce; text-decoration: none; }
.otr-contact-meta div { padding: 4px 0; }

/* --- bottom CTA band --- */
.otr-ctaband { background: #edf2f7; border-radius: 10px; padding: 38px 32px; margin: 40px 0 10px; text-align: center; }
.otr-ctaband h2 { color: #2c5aa0; margin-bottom: 10px; }
.otr-ctaband p { color: #4a5568; max-width: 680px; margin: 0 auto 20px; }

/* --- home proof-byline under hero already styled by ms.css --- */

/* --- responsive: stack cards; let sidebar stack above content on mobile --- */
@media (max-width: 900px) {
    .otr-cards, .otr-cards--2 { grid-template-columns: 1fr; }
    .otr-form .otr-row { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .ms-sidebar { position: static; width: 100%; height: auto; box-shadow: none; }
    .ms-main-container main { margin-left: 0 !important; }
    .otr-navbar-subtitle { display: none; }
}

/* centered CTA row variant (home hero + bands) */
.otr-cta-row--center { justify-content: center; }

/* hero fallback background (readable before/without image) */
.ms-hero { background-color: #2d3748; height: 60vh; }
/* show the middle third of the painting (star + horizon glow), not the top sky */
.ms-hero-image { object-position: center center; }

/* figures (screenshots) */
.otr-figure { margin: 22px 0 8px; }
.otr-figure img { width: 100%; height: auto; display: block; border: 1px solid #e2e8f0; border-radius: 8px; }
.otr-figcaption { font-size: 0.88rem; color: #718096; margin-top: 8px; line-height: 1.5; }

/* numbered process steps (home teaser) */
.otr-steps { margin: 12px 0 16px 1.2rem; padding: 0; max-width: 760px; }
.otr-steps li { padding: 5px 0; color: #2c3e50; }