/*
Theme Name: TRB Publication
Theme URI: https://theroofingbrief.com
Description: Editorial-first design system for The Roofing Brief. Standalone theme - no parent dependency.
Author: The Roofing Brief
Version: 1.0.0
Text Domain: trb-publication
*/

/* ============================================================
   1. RESET + FONTS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --trb-slate: #1A1D1F;
    --trb-storm: #4A5256;
    --trb-terra: #C04A38;
    --trb-cream: #FAFAF7;
    --trb-white: #FFFFFF;
    --trb-mist: #E8E8E5;
    --trb-success: #2D8659;
    --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Astra overrides */
body, body.ast-separate-container,
.site, .ast-container, .entry-content {
    background-color: var(--trb-cream);
    color: var(--trb-slate);
    font-family: var(--sans);
    line-height: 1.6;
}

/* Tighten Astra's default container constraints */
.ast-container {
    max-width: 1200px;
    padding-left: 24px;
    padding-right: 24px;
}

.site-content > .ast-container,
.site-content .ast-container {
    max-width: 1200px;
}

/* Typography - Source Serif 4 for editorial weight */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--serif);
    color: var(--trb-slate);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 700;
}

h1 { font-size: 48px; }
h2 { font-size: 36px; }
h3 { font-size: 26px; }
h4 { font-size: 20px; }

@media (max-width: 768px) {
    h1 { font-size: 36px; }
    h2 { font-size: 28px; }
    h3 { font-size: 22px; }
}

a { color: var(--trb-terra); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   2. SITE HEADER
   ============================================================ */

.trb-site-header {
    background: var(--trb-white);
    border-bottom: 1px solid var(--trb-mist);
    padding: 18px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.trb-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.trb-logo img { display: block; height: 44px; width: auto; }

.trb-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    flex: 1;
    justify-content: center;
}

.trb-nav a {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--trb-slate);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.trb-nav a:hover { color: var(--trb-terra); text-decoration: none; }

.trb-subscribe-btn {
    background: var(--trb-terra);
    color: var(--trb-white) !important;
    padding: 10px 20px;
    border-radius: 4px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: background 0.15s ease;
}

.trb-subscribe-btn:hover { background: #A03E2F; text-decoration: none; }

@media (max-width: 900px) {
    .trb-nav { display: none; }
}

/* ============================================================
   3. HERO BLOCK
   ============================================================ */

.trb-hero {
    background: var(--trb-cream);
    padding: 80px 0 60px;
}

.trb-hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 64px;
    align-items: center;
}

@media (max-width: 900px) {
    .trb-hero-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .trb-hero { padding: 48px 0; }
}

.trb-hero-eyebrow {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--trb-terra);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.trb-hero-headline {
    font-family: var(--serif);
    font-size: 56px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1.5px;
    color: var(--trb-slate);
    margin: 0 0 24px;
}

@media (max-width: 900px) {
    .trb-hero-headline { font-size: 38px; }
}

.trb-hero-subhead {
    font-family: var(--sans);
    font-size: 20px;
    line-height: 1.5;
    color: var(--trb-storm);
    margin: 0 0 28px;
}

.trb-hero-byline {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--trb-storm);
    margin: 0 0 24px;
}

.trb-hero-cta {
    display: inline-block;
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--trb-terra);
    border-bottom: 2px solid var(--trb-terra);
    padding-bottom: 3px;
}

.trb-hero-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--trb-mist);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(26, 29, 31, 0.06);
}

.trb-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   4. NEWSLETTER BAND
   ============================================================ */

.trb-newsletter {
    background: var(--trb-slate);
    color: var(--trb-cream);
    padding: 64px 24px;
    margin: 40px 0;
}

.trb-newsletter-inner {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.trb-newsletter h2 {
    font-family: var(--serif);
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--trb-cream);
    margin: 0 0 12px;
}

.trb-newsletter-tag {
    font-family: var(--sans);
    font-size: 18px;
    color: var(--trb-cream);
    opacity: 0.8;
    margin: 0 0 28px;
}

.trb-newsletter-form {
    display: flex;
    gap: 12px;
    max-width: 540px;
    margin: 0 auto 16px;
    flex-wrap: wrap;
}

.trb-newsletter-form input[type=email] {
    flex: 1;
    min-width: 240px;
    padding: 16px 20px;
    font-family: var(--sans);
    font-size: 16px;
    border: 0;
    border-radius: 4px;
    background: var(--trb-white);
    color: var(--trb-slate);
}

.trb-newsletter-form button {
    padding: 16px 28px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    background: var(--trb-terra);
    color: var(--trb-white);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.trb-newsletter-form button:hover { background: #A03E2F; }

.trb-newsletter-proof {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--trb-cream);
    opacity: 0.6;
    margin: 0;
}

/* ============================================================
   5. SECTION HEADERS + LATEST
   ============================================================ */

.trb-section {
    padding: 64px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.trb-section-inner {
    padding: 0 24px;
}

.trb-section-eyebrow {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--trb-terra);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 12px;
}

.trb-section h2 {
    font-family: var(--serif);
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--trb-slate);
    margin: 0 0 8px;
}

.trb-section-lede {
    font-family: var(--sans);
    font-size: 18px;
    color: var(--trb-storm);
    margin: 0 0 40px;
    max-width: 700px;
}

/* News card grid */
.trb-news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 900px) {
    .trb-news-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .trb-news-grid { grid-template-columns: 1fr; }
}

.trb-news-card {
    background: var(--trb-white);
    border: 1px solid var(--trb-mist);
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.trb-news-card:hover {
    box-shadow: 0 12px 28px rgba(26, 29, 31, 0.08);
    transform: translateY(-2px);
}

.trb-news-thumb {
    aspect-ratio: 16 / 10;
    background: var(--trb-mist);
}

.trb-news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.trb-news-body { padding: 20px; }

.trb-news-category {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    color: var(--trb-terra);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.trb-news-card h3 {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.3px;
    color: var(--trb-slate);
    margin: 0 0 12px;
}

.trb-news-card h3 a { color: inherit; }
.trb-news-card h3 a:hover { color: var(--trb-terra); text-decoration: none; }

.trb-news-meta {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--trb-storm);
    margin: 0;
}

/* ============================================================
   6. PILLAR DESKS GRID
   ============================================================ */

.trb-desks {
    background: var(--trb-white);
    padding: 80px 0;
    border-top: 1px solid var(--trb-mist);
    border-bottom: 1px solid var(--trb-mist);
}

.trb-desks-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.trb-desks-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--trb-mist);
    border: 1px solid var(--trb-mist);
}

@media (max-width: 900px) {
    .trb-desks-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .trb-desks-grid { grid-template-columns: 1fr; }
}

.trb-desk-card {
    background: var(--trb-white);
    padding: 32px 28px;
    display: block;
    transition: background 0.15s ease;
}

.trb-desk-card:hover {
    background: var(--trb-cream);
    text-decoration: none;
}

.trb-desk-card .trb-desk-num {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    color: var(--trb-terra);
    letter-spacing: 1px;
    margin: 0 0 12px;
}

.trb-desk-card h3 {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--trb-slate);
    margin: 0 0 12px;
}

.trb-desk-card p {
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    color: var(--trb-storm);
    margin: 0 0 16px;
}

.trb-desk-card .trb-desk-link {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--trb-terra);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================================
   7. FEATURED STORIES BLOCK
   ============================================================ */

.trb-featured {
    padding: 80px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.trb-featured-inner { padding: 0 24px; }

.trb-featured-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
}

@media (max-width: 900px) {
    .trb-featured-grid { grid-template-columns: 1fr; gap: 32px; }
}

.trb-featured-main {
    border-bottom: 1px solid var(--trb-mist);
    padding-bottom: 32px;
}

.trb-featured-main img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 24px;
}

.trb-featured-main h3 {
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: var(--trb-slate);
    margin: 0 0 16px;
}

.trb-featured-side {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.trb-featured-side .item {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--trb-mist);
}

.trb-featured-side .item:last-child {
    border-bottom: 0;
}

.trb-featured-side h4 {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--trb-slate);
    margin: 0 0 8px;
}

/* ============================================================
   8. SOFTWARE SHOOTOUT BLOCK
   ============================================================ */

.trb-shootout {
    background: var(--trb-slate);
    color: var(--trb-cream);
    padding: 80px 0;
}

.trb-shootout-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
}

.trb-shootout-eyebrow {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--trb-terra);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 16px;
}

.trb-shootout h2 {
    font-family: var(--serif);
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--trb-cream);
    margin: 0 0 24px;
    line-height: 1.05;
}

@media (max-width: 768px) {
    .trb-shootout h2 { font-size: 34px; }
}

.trb-shootout-lede {
    font-family: var(--sans);
    font-size: 20px;
    line-height: 1.5;
    color: var(--trb-cream);
    opacity: 0.85;
    margin: 0 0 32px;
}

.trb-shootout-cta {
    display: inline-block;
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--trb-terra);
    border-bottom: 2px solid var(--trb-terra);
    padding-bottom: 4px;
}

/* ============================================================
   9. GEO FINDER
   ============================================================ */

.trb-geo {
    background: var(--trb-cream);
    padding: 64px 0;
}

.trb-geo-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
}

.trb-geo h2 {
    font-family: var(--serif);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--trb-slate);
    margin: 0 0 8px;
}

.trb-geo p {
    font-family: var(--sans);
    font-size: 16px;
    color: var(--trb-storm);
    margin: 0 0 24px;
}

.trb-geo-form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.trb-geo-form input,
.trb-geo-form select {
    flex: 1;
    min-width: 200px;
    padding: 16px 20px;
    font-family: var(--sans);
    font-size: 16px;
    border: 1px solid var(--trb-mist);
    border-radius: 4px;
    background: var(--trb-white);
    color: var(--trb-slate);
}

.trb-geo-form button {
    padding: 16px 32px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    background: var(--trb-terra);
    color: var(--trb-white);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ============================================================
   10. SITE FOOTER
   ============================================================ */

.trb-footer {
    background: var(--trb-white);
    border-top: 1px solid var(--trb-mist);
    padding: 64px 0 32px;
    color: var(--trb-storm);
    font-family: var(--sans);
}

.trb-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.trb-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}

@media (max-width: 900px) {
    .trb-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 600px) {
    .trb-footer-grid { grid-template-columns: 1fr; }
}

.trb-footer-brand img { height: 32px; margin-bottom: 16px; }

.trb-footer-tagline {
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--trb-storm);
}

.trb-footer-col h4 {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    color: var(--trb-slate);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 16px;
}

.trb-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.trb-footer-col li { margin-bottom: 10px; }

.trb-footer-col a {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--trb-storm);
}

.trb-footer-col a:hover { color: var(--trb-terra); }

.trb-footer-bottom {
    border-top: 1px solid var(--trb-mist);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--trb-storm);
    flex-wrap: wrap;
    gap: 12px;
}

.trb-footer-bottom a {
    font-size: 13px;
    color: var(--trb-storm);
    margin-left: 16px;
}

/* ============================================================
   11. UTILITY + WORDPRESS OVERRIDES
   ============================================================ */

/* Hide WP admin bar margin in case it's leaking through */
html.front-page { margin-top: 0 !important; }
body.home .entry-header,
body.home .entry-title { display: none; }
body.home .ast-container { padding: 0; max-width: 100%; }
body.home #primary { margin: 0; padding: 0; }

/* Hide Astra default header completely on home */
body.home #masthead { display: none; }
body.home #colophon { display: none; }

.trb-content-wrap { background: var(--trb-cream); }