/*
Theme Name: Buyers Institute
Theme URI:  https://example.org/buyers-institute
Author:     Converted Theme
Author URI: https://example.org
Description: A lightweight theme converted from static HTML for Buyers Institute.
Version:    1.0
License:    GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: buyers-institute
*/

/* Add any theme-wide overrides here. Primary layout and variables are included inline in header.php to preserve the original look. */
:root {
    --brand: #0A3D62;
    /* deep ocean blue */
    --accent: #00BFA6;
    /* aqua teal */
    --muted: #94A3B8;
    /* neutral slate */
    --brand-600: #072C47;
    /* darker hover blue */
}

html {
    font-size: 18px;
    scroll-behavior: smooth;
}

body {
    line-height: 1.65;
    color: #0f172a;
    background: #f8fafc;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

h1 {
    font-size: 2.25rem;
    line-height: 1.2;
    font-weight: 800;
}

h2 {
    font-size: 1.75rem;
    line-height: 1.25;
    font-weight: 800;
}

h3 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 700;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border-radius: .6rem;
    padding: .85rem 1.2rem;
}

.btn-primary {
    background: var(--brand);
    color: #fff;
}

.btn-primary:hover {
    background: var(--brand-600);
}

.btn-outline {
    border: 1px solid var(--brand);
    color: var(--brand);
    background: #fff;
}

.btn-outline:hover {
    border-color: var(--brand-600);
    color: var(--brand-600);
}

.btn-lg {
    font-size: 1.125rem;
    padding: 1rem 1.5rem;
    border-radius: .6rem;
}

.grid-wide {
    max-width: 1170px;
    margin: 0 auto;
}

.card {
    background: #fff;
    border: 1px solid #E2E8F0;
}

.ext {
    width: 18px;
    height: 18px;
    margin-left: .5rem;
}

.badge {
    display: inline-block;
    padding: .3rem .6rem;
    border-radius: .5rem;
    background: rgba(0, 191, 166, .12);
    color: #026b60;
    font-weight: 700;
    font-size: .85rem;
}

.badge-geo {
    display: inline-block;
    padding: .25rem .5rem;
    border-radius: .375rem;
    background: rgba(0, 191, 166, .12);
    color: #7a5b00;
    font-weight: 600;
    font-size: .85rem;
}

.badge-fea {
    display: inline-block;
    padding: .25rem .5rem;
    border-radius: .375rem;
    background: rgba(244, 176, 0, .12);
    color: #7a5b00;
    font-weight: 600;
    font-size: .85rem;
}

.badge-geo-fea {
    display: inline-block;
    padding: .25rem .5rem;
    border-radius: .375rem;
    background: rgba(0, 191, 166, .12);
    color: #026b60;
    font-weight: 600;
    font-size: .85rem;
}

/* Sticky bottom CTA – always visible without JS */
.sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
}


/* ============== Layout & Utility Shims ============== */
.grid-wide { max-width: 1140px; margin-inline: auto; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }

.section { padding-block: clamp(2.5rem, 6vw, 4rem); }
.lead { font-size: 1.125rem; line-height: 1.8; color: #334155; max-width: 65ch; }

.card { background:#fff; border:1px solid #E2E8F0; border-radius: 12px; box-shadow: 0 6px 24px rgba(2,8,23,.06); overflow: hidden; }
.card.pad { padding: clamp(1rem, 2.5vw, 1.5rem); }

/* Better focus visibility */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 60%, white);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Smooth image scaling */
img { max-width: 100%; height: auto; }

/* ============== Prose (typography) ============== */
.prose {
    color: #0f172a;
    font-size: 1rem;
    max-width: 70ch;
}
.prose :where(h1,h2,h3,h4) { color:#0b132b; font-weight:800; line-height:1.2; margin-top: 1.6em; margin-bottom:.6em; }
.prose h1 { font-size: clamp(2rem, 4vw, 2.75rem); letter-spacing: -0.02em; }
.prose h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.prose h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }

.prose p { margin: 0 0 1em; line-height: 1.8; }
.prose p + p { margin-top: .75em; }

.prose :where(ul,ol) { padding-left: 1.25rem; margin: 0 0 1.25em; }
.prose li { margin: .35em 0; }
.prose li::marker { color: var(--brand); }

.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--brand-600); }

.prose blockquote {
    margin: 1.5em 0; padding: 1rem 1.25rem; border-left: 4px solid var(--accent);
    background: #f1f5f9; border-radius: 10px; font-style: italic; color: #334155;
}

.prose :where(code,kbd) {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: .95em; background:#0f172a0f; padding:.125rem .35rem; border-radius:.35rem; border:1px solid #e2e8f0;
}
.prose pre {
    overflow:auto; padding:1rem 1.25rem; border-radius:12px; background:#0b1220; color:#e2e8f0; border:1px solid #0f172a;
}
.prose pre code { background: transparent; border: 0; padding: 0; color: inherit; }

.prose hr { border:0; border-top:1px solid #e2e8f0; margin: 2rem 0; }

.prose table { width:100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .95rem; }
.prose th, .prose td { border:1px solid #e2e8f0; padding:.6rem .75rem; text-align: left; }
.prose th { background:#f8fafc; font-weight:700; }

.prose figure { margin: 1.25rem 0; }
.prose figcaption { color:#64748b; font-size:.9rem; margin-top:.4rem; text-align: center; }


/* ============== Contact Page ============== */
.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(1rem, 3vw, 2rem);
    align-items: start;
}
@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; }
}

/* Sidebar card for address, hours, map, etc. */
.contact-aside .title { font-weight: 800; font-size: 1.125rem; margin-bottom: .5rem; }
.contact-aside .meta { color:#475569; font-size: .975rem; line-height: 1.7; }
.contact-aside .meta strong { color:#0f172a; }

/* Form system */
.form { display: grid; gap: 1rem; }
.form .row-2 { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
@media (max-width: 700px){ .form .row-2 { grid-template-columns: 1fr; } }

.label { font-weight: 700; font-size: .95rem; color:#0b132b; display:block; margin-bottom:.35rem; }
.help { font-size: .875rem; color:#64748b; margin-top:.35rem; }

.input, .select, .textarea {
    width: 100%;
    border: 1px solid #CBD5E1;
    background: #fff;
    color:#0f172a;
    border-radius: 10px;
    padding: .8rem .9rem;
    line-height: 1.5;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.textarea { min-height: 160px; resize: vertical; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #334155 50%), linear-gradient(135deg, #334155 50%, transparent 50%), linear-gradient(to right, #e2e8f0, #e2e8f0); background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px), calc(100% - 2.5rem) 0.5em; background-size: 5px 5px, 5px 5px, 1px 1.75em; background-repeat: no-repeat; }

.input::placeholder, .textarea::placeholder { color:#94A3B8; }
.input:focus, .select:focus, .textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
    outline: none;
}

/* Validation states */
.input.is-error, .textarea.is-error, .select.is-error { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.12); }
.input.is-success, .textarea.is-success, .select.is-success { border-color: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.12); }
.note-error { color:#b91c1c; font-size:.9rem; }
.note-success { color:#166534; font-size:.95rem; }

/* Submit row */
.form .actions { display:flex; gap:.75rem; align-items:center; flex-wrap: wrap; }
.form .btn-primary { padding:.9rem 1.25rem; font-weight:800; border-radius: 10px; }


/* ============== Dark Mode (prefers-color-scheme) ============== */
@media (prefers-color-scheme: dark) {
    body { background: #0b1220; color: #e5e7eb; }
    .card { background:#0f172a; border-color:#172033; box-shadow: 0 10px 28px rgba(0,0,0,.45); }
    .prose { color:#e5e7eb; }
    .prose :where(h1,h2,h3,h4) { color:#ffffff; }
    .prose a { color: #7BD7FF; }
    .prose blockquote { background: #0f1b2f; color: #cbd5e1; border-left-color: #00BFA6; }
    .prose table { color:#e5e7eb; }
    .prose th { background:#0f1b2f; }
    .input, .select, .textarea { background:#0f1b2f; color:#e2e8f0; border-color:#1f2a3a; }
    .input::placeholder, .textarea::placeholder { color:#8aa1b5; }
}


/* ===== About hero ===== */
.about-hero__card { padding: clamp(1.25rem, 3vw, 2rem); border-radius: 14px; }
.about-hero__eyebrow { color: var(--accent); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; font-size: .9rem; margin-bottom: .35rem; }
.about-hero__title { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 .65rem; color: #0b132b; }
.about-hero__lead { font-size: 1.125rem; line-height: 1.85; color: #334155; margin: 0 0 .85rem; }
.about-hero__meta { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ===== Two-column layout ===== */
.about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1rem, 3vw, 2rem); }
@media (max-width: 980px) { .about-grid { grid-template-columns: 1fr; } }
.pad { padding: clamp(1rem, 2.5vw, 1.5rem); border-radius: 12px; }

/* ===== Facts / standards cards ===== */
.facts__title { font-weight: 800; margin-bottom: .5rem; }
.facts__list { list-style: none; padding: 0; margin: .25rem 0 0; }
.facts__list li { padding: .5rem 0; border-bottom: 1px solid #e2e8f0; }
.facts__list li:last-child { border-bottom: 0; }

/* ===== Values grid ===== */
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.75rem, 2vw, 1rem); }
@media (max-width: 1100px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .values-grid { grid-template-columns: 1fr; } }
.value { background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 1rem; }
.value__icon { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; font-size: 18px; background: rgba(0,191,166,.12); color: var(--brand); margin-bottom: .5rem; }

/* ===== Stats band ===== */
.stats-band { padding: 1rem; border-radius: 14px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; text-align: center; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stats { grid-template-columns: 1fr; } }
.stat { padding: 1rem; }
.stat__num { font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--brand); line-height: 1; }
.stat__label { color: #475569; margin-top: .35rem; }

/* ===== CTA ===== */
.cta { display: grid; grid-template-columns: 1.5fr auto; align-items: center; gap: 1rem; border-radius: 12px; }
@media (max-width: 760px) { .cta { grid-template-columns: 1fr; } }
.cta__lead { color: #334155; margin: .25rem 0 0; }