/* ==========================================================
   Good Old Times — CRO layer (got-cro.css)
   Loaded by the child theme functions.php AFTER the child style.
   Antique-gold CTA (#B08D57) suits the B/W vintage logo.
   ========================================================== */

/* ---- CTA banner: constrain to the site's 1600px content box ----------
   The parent theme's content lives in .site-inner (max-width:1600px).
   Both the header bar and the footer CTA render as full-bleed; wrap them
   to the same width so they align with the page content. */
.got-cta-wrap {
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}
.got-utility-bar,
.got-footer-cta { width: 100%; box-sizing: border-box; }

/* ---- Remove the theme's large black padding below the footer logo ---
   #site-generator (logo + copyright row) has 49px top/bottom padding,
   leaving a tall black void under the logo. Trim the bottom. */
#site-generator {
    padding-bottom: 20px;
}

/* ---- Header utility bar ----------------------------------- */
.got-utility-bar {
    background: #1a1a1a;
    color: #f2ede4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 8px 20px;
    font-size: 0.82rem;
    letter-spacing: .02em;
}
.got-utility-text { opacity: .92; }
.got-utility-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- CTA buttons ----------------------------------------- */
.got-cta {
    display: inline-block;
    background: #B08D57;
    color: #1a1a1a;
    font-weight: 700;
    text-decoration: none;
    padding: 9px 18px;
    border-radius: 3px;
    border: 1px solid #B08D57;
    transition: background .15s ease, color .15s ease;
}
.got-cta:hover { background: #9a7845; color: #fff; }
.got-cta-outline {
    background: transparent;
    color: #B08D57;
}
.got-cta-outline:hover { background: #B08D57; color: #1a1a1a; }
/* Home hero CTA — larger, sits under "Start with a Free Estimate" */
.got-cta.got-cta--hero {
    display: inline-block;
    padding: 15px 34px;
    font-size: 1.05rem;
    letter-spacing: .02em;
    box-shadow: 0 3px 12px rgba(0,0,0,.28);
    margin: 6px 0 4px;
}
.got-cta.got-cta--hero:hover { transform: translateY(-1px); }

/* ---- Footer CTA line ------------------------------------- */
.got-footer-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 16px;
    padding: 14px 20px;
    margin-top: 18px;
    border-top: 1px solid #2c2c2c;
    color: #f2ede4;
    font-size: 0.9rem;
}
.got-footer-cta .got-cta { padding: 8px 16px; }

/* ---- In-stock card grid (For Sale index / brand pages) ---- */
.got-stock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
    margin: 24px 0;
}
.got-stock-card {
    border: 1px solid #d8d2c6;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}
.got-stock-card img { width: 100%; height: auto; display: block; }
.got-stock-card .got-stock-body { padding: 12px 14px; }
.got-stock-card .got-stock-model { font-size: .95rem; line-height: 1.35; }
.got-stock-card .got-stock-price {
    display: block;
    margin: 8px 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #7a5a2c;
}
.got-stock-card .got-stock-status {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
}
.got-stock-card .got-stock-status.available { background: #e7f4e7; color: #1f6b1f; }
.got-stock-card .got-stock-status.sold { background: #eee; color: #777; text-decoration: line-through; }

/* Separate the sold archive visually */
.got-sold-archive .got-stock-card { opacity: .78; }
.got-sold-archive h2, .got-sold-archive .got-archive-title {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 1rem;
    color: #777;
    border-bottom: 2px solid #ddd;
    padding-bottom: 6px;
    margin: 30px 0 14px;
}

/* ---- Lyte / EmbedPress spacing on brand pages (waltham/elgin) ----
   The child style.css already handles .wp-block-embed. The brand pages
   use WP YouTube Lyte; this closes the leftover gaps. */
body .lyMe, body .lytebox, body .wp-lyte {
    max-width: 720px;
    margin: 0 auto 28px;
    display: block;
}
body .wp-embed-aspect-16-9 .lyMe { aspect-ratio: 16 / 9; }

/* ---- Mobile ------------------------------------------------ */
@media (max-width: 48em) {
    .got-utility-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 14px;
    }
    .got-utility-actions { width: 100%; }
    .got-utility-actions .got-cta,
    .got-utility-actions .got-cta-outline {
        flex: 1 1 auto;
        text-align: center;
    }
    .got-footer-cta { font-size: .85rem; }
    /* Kill the empty white strip above the footer CTA on phones */
    .got-footer-cta { margin-top: 0; padding-top: 10px; padding-bottom: 10px; }
    .got-footer-cta .got-cta { margin: 4px 0; }
}