/*
Theme Name: PSA Blog
Theme URI: https://dogfenceal.com/blog/
Author: Pet Stop of Alabama
Description: Classic WordPress theme for the Pet Stop of Alabama blog at dogfenceal.com/blog/. Visually matches the main static site. Header, announcement bar, and footer markup are copied from the main site and must be kept in sync with it by hand. See readme.txt for the sync rule.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary. Internal use by Pet Stop Pet Fence Systems of Alabama.
Text Domain: psa-blog
*/

/* ============================================================
   1. SHARED CHROME, copied from dogfenceal.com production
      (index.html export 2026-09-02). If the main site header,
      announce bar, or footer changes, mirror it here.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green-deep:  #1a3d22;
  --green-mid:   #295934;
  --green-light: #3a7a48;
  --psa-red:     #CC1111;
  --psa-gold:    #d7a131;
  --psa-dark:    #111a13;
  --psa-dark2:   #1e2e21;
  --white:       #ffffff;
  --gray-light:  #f4f5f7;
  --gray-mid:    #e0e0e0;
  --text-main:   #222222;
  --text-muted:  #666666;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; font-size: 16px; color: var(--text-main); background: #fff; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* ===== ANNOUNCEMENT BAR ===== */
#announce-bar {
  background: var(--psa-dark);
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  text-align: center;
}
.announce-inner { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.announce-item { padding: 2px 14px; border-right: 1px solid rgba(255,255,255,0.2); line-height: 1.4; }
.announce-item:last-child { border-right: none; }
.announce-item a { color: var(--psa-gold); font-weight: 600; transition: opacity 0.2s; }
.announce-item a:hover { opacity: 0.8; }
.announce-item span { color: rgba(255,255,255,0.7); margin-right: 4px; }

/* ===== STICKY HEADER ===== */
#site-header { position: sticky; top: 0; z-index: 100; background: var(--green-deep); box-shadow: 0 2px 14px rgba(0,0,0,0.3); }
.header-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; height: 68px; }
.site-logo img { height: 44px; width: auto; }

/* ===== NAV ===== */
.main-nav { display: flex; align-items: center; gap: 2px; }
.main-nav a { color: var(--white); font-size: 13.5px; font-weight: 500; padding: 8px 11px; border-radius: 4px; transition: background 0.2s; white-space: nowrap; }
.main-nav a:hover { background: rgba(255,255,255,0.12); }
.main-nav .nav-shop { background: var(--psa-gold); color: var(--psa-dark) !important; font-weight: 700; padding: 8px 16px; }
.main-nav .nav-shop:hover { background: #c49028; }

.nav-item { position: relative; display: flex; align-items: center; }
.nav-caret { font-size: 9px; margin-left: 5px; opacity: 0.75; }
.nav-dropdown { position: absolute; top: 100%; left: 0; background: var(--green-deep); min-width: 208px; border-radius: 0 0 4px 4px; box-shadow: 0 10px 26px rgba(0,0,0,0.32); padding: 6px 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s, transform 0.18s, visibility 0.18s; }
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a { display: block; padding: 9px 16px; font-size: 13px; border-radius: 0; white-space: nowrap; }

/* Hamburger */
.hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; cursor: pointer; background: none; border: none; padding: 4px; }
.hamburger span { display: block; width: 100%; height: 2px; background: var(--white); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav { display: none; flex-direction: column; background: var(--green-deep); padding: 8px 0 16px; }
.mobile-nav.open { display: flex; }
.mobile-nav a { color: var(--white); font-size: 15px; font-weight: 500; padding: 12px 24px; border-bottom: 1px solid rgba(255,255,255,0.08); transition: background 0.2s; }
.mobile-nav a:hover { background: rgba(255,255,255,0.08); }
.mobile-nav .nav-shop-mobile { margin: 12px 20px 0; background: var(--psa-gold); color: var(--psa-dark) !important; font-weight: 700; text-align: center; border-radius: 4px; border-bottom: none; padding: 14px 20px; }

.mobile-sub { background: rgba(0,0,0,0.20); display: flex; flex-direction: column; }
.mobile-sub a { padding-left: 42px !important; font-size: 14px !important; color: rgba(255,255,255,0.82) !important; }

.header-call { display: none; align-items: center; gap: 7px; color: var(--psa-gold); font-weight: 700; font-size: 14px; white-space: nowrap; }
.header-call:hover { color: #e8b445; }
.header-call .call-icon { display: block; flex-shrink: 0; }

@media (max-width: 1050px) {
  .main-nav { display: none; }
  .hamburger { display: flex; }
  .header-call { display: flex; margin-left: auto; margin-right: 16px; }
}
@media (max-width: 400px) {
  .header-call .call-text { display: none; }
}

/* ===== BUTTONS ===== */
.btn-primary { background: var(--psa-red); color: var(--white); font-weight: 700; font-size: 15px; padding: 14px 28px; border-radius: 4px; transition: background 0.2s, transform 0.15s; display: inline-block; border: none; cursor: pointer; }
.btn-primary:hover { background: #aa0e0e; transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--white); font-weight: 600; font-size: 15px; padding: 13px 28px; border: 2px solid rgba(255,255,255,0.55); border-radius: 4px; transition: border-color 0.2s, background 0.2s; display: inline-block; }
.btn-secondary:hover { border-color: var(--white); background: rgba(255,255,255,0.1); }

/* ===== FOOTER ===== */
.site-footer { background: var(--psa-dark); color: rgba(255,255,255,0.7); padding: 48px 20px 28px; }
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 28px; }
.footer-logo img { height: 40px; width: auto; margin-bottom: 14px; }
.footer-tagline { font-size: 0.88rem; line-height: 1.6; color: rgba(255,255,255,0.55); margin-bottom: 14px; }
.footer-address { font-size: 0.84rem; color: rgba(255,255,255,0.5); line-height: 1.65; }
.footer-address a { color: rgba(255,255,255,0.6); }
.footer-col h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--psa-gold); margin-bottom: 14px; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a { font-size: 0.88rem; color: rgba(255,255,255,0.65); transition: color 0.2s; }
.footer-col ul li a:hover { color: var(--white); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 0.8rem; color: rgba(255,255,255,0.35); }

@media (max-width: 780px) {
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .announce-item { padding: 2px 8px; font-size: 11px; }
}
@media (max-width: 480px) {
  .announce-inner { flex-direction: column; gap: 3px; }
  .announce-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); padding: 3px 0; }
  .announce-item:last-child { border-bottom: none; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ============================================================
   2. BLOG-SPECIFIC STYLES
   ============================================================ */

/* Page hero band, matches main-site interior page pattern */
.blog-hero { background: linear-gradient(180deg, #20482a 0%, var(--green-deep) 100%); color: var(--white); padding: 52px 20px 46px; }
.blog-hero-inner { max-width: 1100px; margin: 0 auto; }
.blog-hero .eyebrow { color: var(--psa-gold); text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; font-weight: 600; margin-bottom: 14px; display: block; }
.blog-hero .eyebrow a { color: var(--psa-gold); }
.blog-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 4.2vw, 2.8rem); font-weight: 700; color: var(--white); line-height: 1.2; max-width: 22ch; }
.blog-hero .lead { color: #dfe7e0; font-size: 18px; margin-top: 14px; max-width: 62ch; }
.blog-hero .post-meta { margin-top: 16px; }

.post-meta { font-size: 0.86rem; color: rgba(255,255,255,0.75); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.post-meta a { color: var(--psa-gold); font-weight: 600; }

/* Layout containers */
.blog-main { max-width: 1100px; margin: 0 auto; padding: 48px 20px 64px; }
.article-main { max-width: 760px; margin: 0 auto; padding: 44px 20px 56px; }

/* Post card grid */
.post-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
@media (max-width: 780px) { .post-grid { grid-template-columns: 1fr; gap: 30px; } }

.post-card { background: #fff; border: 1px solid var(--gray-mid); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.18s, transform 0.15s; }
.post-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.10); transform: translateY(-2px); }
.post-card-thumb { display: block; aspect-ratio: 16 / 9; background: var(--gray-light); }
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card-cat { font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--green-mid); }
.post-card-cat a { color: var(--green-mid); }
.post-card-cat a:hover { color: var(--green-deep); }
.post-card h2 { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700; line-height: 1.3; }
.post-card h2 a:hover { color: var(--green-mid); }
.post-card-excerpt { font-size: 0.94rem; color: var(--text-muted); }
.post-card-date { font-size: 0.82rem; color: #999; margin-top: auto; padding-top: 6px; }

/* Article content */
.article-content { font-size: 17px; line-height: 1.7; }
.article-content > * + * { margin-top: 1.15em; }
.article-content h2 { font-family: 'Playfair Display', serif; font-size: 1.65rem; font-weight: 700; line-height: 1.25; color: var(--green-deep); margin-top: 1.9em; }
.article-content h3 { font-size: 1.2rem; font-weight: 600; color: var(--text-main); margin-top: 1.6em; }
.article-content a { color: var(--green-mid); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(41,89,52,0.35); text-underline-offset: 2px; }
.article-content a:hover { color: var(--green-deep); text-decoration-color: currentColor; }
.article-content ul, .article-content ol { padding-left: 1.4em; }
.article-content li { margin-bottom: 0.45em; }
.article-content blockquote { border-left: 4px solid var(--psa-gold); padding: 4px 0 4px 20px; color: var(--text-muted); font-style: italic; }
.article-content figure { margin: 1.6em 0; }
.article-content figcaption { font-size: 0.84rem; color: var(--text-muted); margin-top: 8px; text-align: center; }
.article-content img { border-radius: 6px; }
.article-content hr { border: none; border-top: 1px solid var(--gray-mid); margin: 2.2em 0; }
.article-content code { background: var(--gray-light); padding: 2px 6px; border-radius: 3px; font-size: 0.9em; }

/* Responsive tables, Gutenberg and classic */
.article-content .wp-block-table, .article-content .tablewrap { overflow-x: auto; }
.article-content table { border-collapse: collapse; width: 100%; min-width: 560px; background: #fff; border: 1px solid var(--gray-mid); }
.article-content th, .article-content td { padding: 10px 14px; border: 1px solid var(--gray-mid); text-align: left; font-size: 0.94rem; }
.article-content th { background: var(--gray-light); font-weight: 600; }

/* Gutenberg essentials */
.article-content .wp-block-image { margin-left: 0; margin-right: 0; }
.article-content .alignwide, .article-content .alignfull { width: 100%; }
.article-content .wp-block-button__link { background: var(--psa-red); color: var(--white); border-radius: 4px; padding: 12px 24px; font-weight: 700; text-decoration: none; }
.article-content .wp-block-embed iframe { max-width: 100%; }

.article-featured { margin: 0 0 30px; }
.article-featured img { width: 100%; border-radius: 8px; }

/* Byline under hero */
.article-byline { font-size: 0.88rem; color: var(--text-muted); border-bottom: 1px solid var(--gray-mid); padding-bottom: 18px; margin-bottom: 28px; }

/* Estimate CTA band */
.cta-band { background: var(--psa-dark2); color: var(--white); border-radius: 10px; padding: 34px 30px; margin-top: 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-band-text h2 { font-family: 'Playfair Display', serif; font-size: 1.45rem; font-weight: 700; margin-bottom: 6px; color: var(--white); }
.cta-band-text p { color: rgba(255,255,255,0.75); font-size: 0.95rem; }
@media (max-width: 560px) { .cta-band { flex-direction: column; align-items: flex-start; } }

/* Related posts */
.related-posts { margin-top: 54px; padding-top: 34px; border-top: 1px solid var(--gray-mid); }
.related-posts > h2 { font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 700; color: var(--green-deep); margin-bottom: 22px; }

/* Pagination */
.blog-pagination { margin-top: 46px; }
.blog-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.blog-pagination .page-numbers { display: inline-block; padding: 9px 15px; border: 1px solid var(--gray-mid); border-radius: 4px; font-size: 0.9rem; font-weight: 600; color: var(--green-deep); }
.blog-pagination .page-numbers.current { background: var(--green-deep); color: var(--white); border-color: var(--green-deep); }
.blog-pagination a.page-numbers:hover { border-color: var(--green-mid); }

/* Search form */
.blog-search-form { display: flex; gap: 10px; max-width: 480px; margin-top: 20px; }
.blog-search-form input[type="search"] { flex: 1; padding: 12px 14px; border: 1px solid var(--gray-mid); border-radius: 4px; font-size: 15px; font-family: inherit; }
.blog-search-form input[type="search"]:focus { outline: 2px solid var(--green-mid); outline-offset: 1px; border-color: var(--green-mid); }

/* 404 and empty states */
.empty-state { max-width: 640px; margin: 0 auto; padding: 26px 0 10px; }
.empty-state p { margin-bottom: 14px; }
.empty-state ul { list-style: none; margin-top: 18px; }
.empty-state ul li { margin-bottom: 10px; }
.empty-state ul li a { color: var(--green-mid); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Accessibility */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); word-wrap: normal; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--psa-gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}