/*
Theme Name: Blair Williams
Version: 5.0
Description: Clean, light personal brand site for Blair Williams — matching the tone of syedbalkhi.com.
*/

/* ── Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* ── Base reset ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  { font-family: 'EB Garamond', Georgia, serif; background: #F8F6F1; color: #111111; font-size: 18px; }
img   { max-width: 100%; display: block; }
a     { text-decoration: none; color: inherit; }

/* ── Marquee ────────────────────────────────────────── */
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.marquee-track {
    animation: marquee 26s linear infinite;
    display: flex;
    width: max-content;
    white-space: nowrap;
}

/* ── Product card hover ─────────────────────────────── */
.product-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(17,17,17,0.10); }

/* ── Post row hover ─────────────────────────────────── */
.post-row { transition: background 0.15s ease; cursor: pointer; }
.post-row:hover { background: rgba(17,17,17,0.03); }
.post-row:hover .post-arrow { color: #111111; }
.post-row:hover .post-title  { color: rgba(17,17,17,0.55); }

/* ── Focus states (WCAG AA) ─────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 3px;
}

/* ── Mobile responsive ──────────────────────────────── */
@media (max-width: 767px) {

    /* Nav */
    .bw-nav-links       { display: none !important; }
    .bw-mobile-contact  { display: block !important; }

    /* Hero */
    .bw-hero-grid  {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .bw-hero-photo { display: none !important; }
    .bw-stats      { gap: 2rem !important; margin-top: 2.5rem !important; }

    /* Section padding */
    section { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
    section[id="story"],
    section[id="companies"],
    section[id="writing"],
    section[id="contact"] {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    /* Story */
    .bw-story-grid    { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
    .bw-story-content { grid-template-columns: 1fr !important; gap: 2rem !important; }
    .bw-story-content > div:first-child { display: none !important; } /* hide photo on mobile — text is enough */

    /* Companies */
    .bw-products-grid { grid-template-columns: 1fr !important; }

    /* Writing rows: collapse 3-col → title only */
    .bw-post-row  { grid-template-columns: 1fr !important; gap: 0.375rem !important; padding: 1.25rem 0 !important; margin: 0 !important; }
    .bw-post-date { display: none !important; }
    .bw-post-cta  { display: none !important; }

    /* Newsletter */
    .bw-newsletter-grid { grid-template-columns: 1fr !important; gap: 3rem !important; }

    /* Footer */
    footer > div { flex-direction: column !important; gap: 1.5rem !important; align-items: flex-start !important; }
}

/* ── WordPress content styles ───────────────────────── */
.entry-content p        { margin-bottom: 1.5rem; line-height: 1.8; color: rgba(17,17,17,0.72); }
.entry-content h2       { font-family: 'Jost', sans-serif; font-size: 1.75rem; font-weight: 700; margin: 2.5rem 0 1rem; }
.entry-content h3       { font-family: 'Jost', sans-serif; font-size: 1.35rem; font-weight: 600; margin: 2rem 0 0.75rem; }
.entry-content ul,
.entry-content ol       { margin: 1rem 0 1.5rem 1.5rem; color: rgba(17,17,17,0.72); line-height: 1.8; }
.entry-content a        { color: #111111; text-decoration: underline; text-underline-offset: 3px; }
.entry-content blockquote { border-left: 3px solid #111111; padding-left: 1.5rem; margin: 2rem 0; font-style: italic; color: rgba(17,17,17,0.6); }
.entry-content img      { margin: 2rem 0; }