/*
Theme Name: Apartment Pets Co.
Theme URI: https://example.com
Author: JBAR GLOBAL LLC
Author URI: https://example.com
Description: A lightweight, maintainable theme built for PawSpace Living (beige-rail-945374.hostingersite.com) — a US-focused affiliate blog covering apartment-friendly pet products for cats and dogs. Built entirely on core WordPress (block editor, native menus, native categories, native custom fields). No page builder, no required plugins. Site title and tagline are set in Settings → General, not hardcoded here.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: apartment-pets-co
*/

/* ===== Apartment Pets Co. — theme stylesheet =====
   Ported directly from the approved static-site design (styles.css).
   Do not change colors/type/spacing here without checking against the
   approved design reference first. */

:root{
  --cream:#faf6f0;
  --cream-deep:#f2ebe0;
  --ink:#2b2622;
  --ink-soft:#5c554d;
  --terracotta:#c1622d;
  --terracotta-deep:#a34f22;
  --sage:#6b7d5e;
  --sage-pale:#e8ede2;
  --line:#e4dccd;
  --white:#ffffff;
  --radius:10px;
  --maxw:1120px;
  --shadow:0 2px 10px rgba(43,38,34,0.06);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --cream:#211d19;
    --cream-deep:#2a2521;
    --ink:#f1ece3;
    --ink-soft:#c9c0b2;
    --line:#3a332c;
    --white:#2a2521;
    --sage-pale:#2e332a;
    --shadow:0 2px 10px rgba(0,0,0,0.35);
  }
}
:root[data-theme="dark"]{
  --cream:#211d19;
  --cream-deep:#2a2521;
  --ink:#f1ece3;
  --ink-soft:#c9c0b2;
  --line:#3a332c;
  --white:#2a2521;
  --sage-pale:#2e332a;
  --shadow:0 2px 10px rgba(0,0,0,0.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Fraunces", Georgia, "Times New Roman", serif;
  font-weight:600;
  line-height:1.2;
  color:var(--ink);
  margin:0 0 0.5em;
}
h1{font-size:clamp(1.9rem,4.5vw,2.9rem);}
h2{font-size:clamp(1.4rem,3vw,1.9rem);}
h3{font-size:1.2rem;}
p{margin:0 0 1em;}
a{color:var(--terracotta-deep);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;height:auto;display:block;border-radius:var(--radius);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}

/* ---- accessibility helper (WordPress standard) ---- */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
  overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;
}
.screen-reader-text:focus{
  background:var(--white);color:var(--ink);display:block;height:auto;left:5px;top:5px;
  padding:12px 16px;width:auto;z-index:100000;clip:auto!important;clip-path:none;text-decoration:none;
  border-radius:8px;box-shadow:var(--shadow);
}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--terracotta);outline-offset:2px;
}

/* ---- placeholder image block ---- */
.placeholder-img{
  background:repeating-linear-gradient(45deg,var(--cream-deep),var(--cream-deep) 10px,var(--sage-pale) 10px,var(--sage-pale) 20px);
  border:1px dashed var(--line);
  border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);
  font-size:0.85rem;
  text-align:center;
  padding:8px;
  min-height:180px;
}

/* ---- header / nav ---- */
.site-header{
  background:var(--white);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.header-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 20px;
  max-width:var(--maxw);margin:0 auto;
}
.brand{
  font-family:"Fraunces",serif;font-weight:700;font-size:1.25rem;color:var(--ink);
  display:flex;align-items:center;gap:8px;
}
.brand:hover{text-decoration:none;color:var(--ink);}
.brand-mark{
  width:30px;height:30px;border-radius:8px;
  background:var(--terracotta);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:0.95rem;font-weight:700;flex-shrink:0;
}
.custom-logo{max-height:34px;width:auto;border-radius:0;}

/* single WordPress nav menu, shown responsively via CSS + one toggle button
   (no duplicated markup for mobile vs desktop — easier to maintain) */
.nav-toggle{
  background:none;border:1px solid var(--line);border-radius:8px;
  padding:8px 12px;font-size:0.95rem;color:var(--ink);cursor:pointer;
}
@media(min-width:840px){.nav-toggle{display:none;}}

#site-navigation{order:3;flex-basis:100%;}
@media(min-width:840px){#site-navigation{order:2;flex-basis:auto;}}

#site-navigation ul.menu{list-style:none;margin:0;padding:0;display:none;}
#site-navigation.nav-open ul.menu{
  display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:14px;
}
#site-navigation.nav-open ul.menu li{border-bottom:1px solid var(--line);}
#site-navigation.nav-open ul.menu a{display:block;padding:12px 4px;color:var(--ink);}
@media(min-width:840px){
  #site-navigation ul.menu{
    display:flex!important;flex-direction:row;gap:18px;font-size:0.95rem;border-top:0;margin-top:0;
  }
  #site-navigation ul.menu li{border-bottom:0;}
  #site-navigation ul.menu a{display:inline;padding:0;}
}
#site-navigation ul.menu a{color:var(--ink-soft);}
#site-navigation ul.menu a:hover,
#site-navigation ul.menu .current-menu-item>a,
#site-navigation ul.menu .current_page_item>a{color:var(--terracotta-deep);}

/* ---- hero ---- */
.hero{background:var(--cream-deep);padding:56px 0 48px;}
.hero .wrap{display:grid;gap:32px;grid-template-columns:1fr;align-items:center;}
@media(min-width:840px){.hero .wrap{grid-template-columns:1.1fr 0.9fr;}}
.hero h1{max-width:16ch;}
.hero p.sub{font-size:1.1rem;color:var(--ink-soft);max-width:46ch;}
.btn{
  display:inline-block;background:var(--terracotta);color:#fff;
  padding:12px 22px;border-radius:8px;font-weight:600;font-size:0.98rem;
  border:none;cursor:pointer;
}
.btn:hover{background:var(--terracotta-deep);text-decoration:none;color:#fff;}
.btn-outline{
  display:inline-block;background:transparent;color:var(--ink);
  padding:11px 21px;border-radius:8px;font-weight:600;font-size:0.98rem;
  border:1px solid var(--line);
}
.btn-outline:hover{border-color:var(--terracotta);text-decoration:none;}

/* ---- value strip ---- */
.value-strip{padding:28px 0;}
.value-item{display:flex;gap:12px;align-items:flex-start;}
.value-item .emoji{font-size:1.4rem;}
.value-item p{margin:2px 0 0;color:var(--ink-soft);font-size:0.92rem;}

/* ---- sections ---- */
section{padding:48px 0;}
section.alt{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap;}
.section-head a.see-all{font-size:0.9rem;font-weight:600;}

/* ---- category / card grids ---- */
.grid{display:grid;gap:22px;grid-template-columns:1fr;}
@media(min-width:640px){.grid-2{grid-template-columns:1fr 1fr;}}
@media(min-width:840px){.grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);}}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);display:block;color:inherit;
}
.card:hover{text-decoration:none;}
.card h3{margin-bottom:6px;}
.card p{color:var(--ink-soft);font-size:0.95rem;margin-bottom:10px;}
.card .tag{
  display:inline-block;font-size:0.72rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--sage);background:var(--sage-pale);padding:3px 9px;border-radius:20px;margin-bottom:10px;
}
.card .draft-flag{
  display:inline-block;font-size:0.72rem;color:var(--terracotta-deep);
  background:#fbe9de;padding:3px 9px;border-radius:20px;margin-bottom:10px;
}

/* ---- signup ---- */
.signup{background:var(--sage-pale);border-radius:var(--radius);padding:32px;text-align:center;}
.signup h2{margin-bottom:6px;}
.signup p{color:var(--ink-soft);max-width:44ch;margin:0 auto 18px;}
.signup form{display:flex;gap:10px;max-width:420px;margin:0 auto;flex-wrap:wrap;justify-content:center;}
.signup input[type=email]{
  flex:1;min-width:200px;padding:11px 14px;border-radius:8px;border:1px solid var(--line);font-size:0.95rem;
}

/* ---- article ---- */
.article-hero{padding:44px 0 24px;border-bottom:1px solid var(--line);}
.article-meta{color:var(--ink-soft);font-size:0.88rem;margin-bottom:14px;}
.article-body{max-width:70ch;}
.article-body h2{margin-top:1.6em;}
.article-body ul,.article-body ol{padding-left:1.3em;}
.article-body li{margin-bottom:0.4em;}
table.compare{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:0.92rem;}
table.compare th,table.compare td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;}
table.compare th{background:var(--cream-deep);font-family:"Fraunces",serif;}
.callout{
  background:var(--sage-pale);border-left:4px solid var(--sage);border-radius:8px;
  padding:14px 18px;margin:1.4em 0;font-size:0.95rem;
}
.draft-note{
  background:#fbe9de;border-left:4px solid var(--terracotta);border-radius:8px;
  padding:14px 18px;margin:1.4em 0;font-size:0.92rem;color:var(--terracotta-deep);
}
.pros-cons{display:grid;gap:16px;grid-template-columns:1fr;margin:1.4em 0;}
@media(min-width:640px){.pros-cons{grid-template-columns:1fr 1fr;}}
.pros-cons .box{border:1px solid var(--line);border-radius:8px;padding:14px 16px;}
.pros-cons .box.pros{border-top:4px solid var(--sage);}
.pros-cons .box.cons{border-top:4px solid var(--terracotta);}
.pros-cons h4{margin-bottom:6px;}
.pros-cons ul{margin:0;padding-left:1.1em;}

/* ---- breadcrumb ---- */
.crumb{font-size:0.85rem;color:var(--ink-soft);padding:14px 0 0;}
.crumb a{color:var(--ink-soft);}

/* ---- pagination (archives, search) ---- */
.pagination{display:flex;gap:8px;flex-wrap:wrap;margin:32px 0 0;}
.pagination a,.pagination span{
  display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:8px;
  color:var(--ink-soft);font-size:0.9rem;
}
.pagination .current{background:var(--terracotta);border-color:var(--terracotta);color:#fff;}
.pagination a:hover{border-color:var(--terracotta);text-decoration:none;color:var(--terracotta-deep);}

/* ---- search ---- */
.search-form-block{display:flex;gap:10px;max-width:480px;margin:18px 0 0;flex-wrap:wrap;}
.search-form-block input[type=search]{
  flex:1;min-width:200px;padding:11px 14px;border-radius:8px;border:1px solid var(--line);font-size:0.95rem;
}
.search-results-count{color:var(--ink-soft);font-size:0.92rem;margin-bottom:22px;}
.no-results{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px;}

/* ---- comments (structure kept, hidden by default — see functions.php) ---- */
.comments-area{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);}
.comment-list{list-style:none;margin:0;padding:0;}
.comment-list li{padding:14px 0;border-bottom:1px solid var(--line);}
.comment-respond input[type=text],.comment-respond input[type=email],.comment-respond textarea{
  width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;margin-top:4px;
}

/* ---- footer ---- */
footer.site-footer{background:var(--ink);color:var(--cream);margin-top:40px;}
footer.site-footer .wrap{padding:40px 20px 28px;display:grid;gap:28px;grid-template-columns:1fr;}
@media(min-width:640px){footer.site-footer .wrap{grid-template-columns:1.3fr 1fr 1fr;}}
footer.site-footer h4{color:var(--cream);font-family:"Source Sans 3",sans-serif;font-size:0.85rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;}
footer.site-footer a{color:#d8d0c3;}
footer.site-footer ul{list-style:none;margin:0;padding:0;}
footer.site-footer li{margin-bottom:8px;font-size:0.92rem;}
.footer-bottom{border-top:1px solid #46403a;padding:16px 20px;font-size:0.82rem;color:#a89f90;text-align:center;}
.footer-disclosure{font-size:0.85rem;color:#c9c0b2;max-width:60ch;}
.privacy-policy-link{color:#d8d0c3;}

/* ---- misc ---- */
.page-hero{padding:44px 0 8px;}
.page-hero p.sub{color:var(--ink-soft);max-width:60ch;}
.checklist{list-style:none;padding:0;margin:1.2em 0;}
.checklist li{padding:10px 0 10px 30px;border-bottom:1px solid var(--line);position:relative;}
.checklist li::before{content:"☐";position:absolute;left:0;top:9px;color:var(--sage);font-size:1.1rem;}

/* ---- block editor alignment support (kept minimal, no page-builder classes) ---- */
.alignwide{max-width:calc(var(--maxw) + 120px);margin-left:auto;margin-right:auto;}
.alignfull{max-width:none;width:100%;}
.wp-block-image{margin:1.4em 0;}
.wp-block-table table{width:100%;border-collapse:collapse;}
.wp-block-table th,.wp-block-table td{border:1px solid var(--line);padding:10px 12px;}


/* ---- Section A: visual polish ---- */
.placeholder-img{background:linear-gradient(135deg,var(--sage-pale),var(--cream-deep));border:1.5px dashed var(--sage);border-radius:14px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink-soft);font-style:italic;font-size:0.9rem;padding:16px;}
img{border-radius:14px;}
.card img,.hero-logo,picture img,.wp-block-image img{border-radius:14px;}
section{padding-top:56px;padding-bottom:56px;}
.card{border-radius:16px;box-shadow:0 2px 10px rgba(43,38,34,0.06);transition:box-shadow .2s ease,transform .2s ease;}
.card:hover{box-shadow:0 8px 22px rgba(43,38,34,0.12);transform:translateY(-2px);}
.btn{border-radius:999px;padding:12px 26px;font-weight:600;letter-spacing:.01em;}
h2{margin-bottom:.6em;}
.hero{background:linear-gradient(180deg,var(--cream) 0%,var(--sage-pale) 100%);}
.section-sage{background:var(--sage-pale);}
.section-cream{background:var(--cream-deep);}
.wrap{padding-left:20px;padding-right:20px;}
@media(max-width:640px){section{padding-top:36px;padding-bottom:36px;}.wrap{padding-left:16px;padding-right:16px;}}

/* ---- Small-Space Pet Picks (homepage) ---- */
.picks-head{text-align:center;max-width:640px;margin:0 auto 34px;}
.picks-eyebrow{display:inline-block;font-size:0.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);font-weight:600;margin-bottom:10px;}
.picks-head h2{margin-bottom:.4em;}
.picks-sub{color:var(--ink-soft);font-size:1.05rem;margin:0;}
.picks-grid{gap:28px;align-items:stretch;}
.picks-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 2px 10px rgba(43,38,34,0.06);transition:box-shadow .2s ease,transform .2s ease;}
.picks-card:hover{box-shadow:0 8px 22px rgba(43,38,34,0.12);transform:translateY(-2px);}
.picks-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--sage-pale);}
.picks-media img{width:100%;height:100%;object-fit:cover;border-radius:0;}
.picks-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 26px;}
.picks-label{align-self:flex-start;display:inline-block;font-size:0.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sage);background:var(--sage-pale);padding:3px 10px;border-radius:20px;margin-bottom:12px;}
.picks-label.is-soon{color:var(--terracotta-deep);background:#fbe9de;}
.picks-body h3{font-size:1.28rem;margin-bottom:8px;}
.picks-body p{color:var(--ink-soft);font-size:0.97rem;margin-bottom:20px;}
.picks-action{margin-top:auto;}
.picks-soon{display:inline-block;padding:11px 22px;border:1px dashed var(--line);border-radius:999px;color:var(--ink-soft);font-size:0.95rem;font-weight:600;}
@media(max-width:839px){.picks-grid{max-width:520px;margin-left:auto;margin-right:auto;}}
@media(prefers-reduced-motion:reduce){.picks-card{transition:none;}.picks-card:hover{transform:none;}}


/* ---- newsletter signup (MailPoet) ---- */
.signup.signup-live{padding:44px 28px;}
.signup-live h2{margin-bottom:8px;}
.signup-live > p{margin:0 auto 24px;}
.signup-live .mailpoet_form{max-width:460px;margin:0 auto;text-align:left;}
.signup-live form.mailpoet_form_form{display:block;max-width:none;margin:0;}
.signup-live .mailpoet_paragraph{margin:0 0 12px !important;line-height:1.4 !important;}
.signup-live .mailpoet_text,
.signup-live input[type=email].mailpoet_text{
  display:block;width:100% !important;max-width:none;min-width:0;flex:none;box-sizing:border-box;
  padding:13px 16px !important;margin:0 !important;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:8px;
}
.signup-live .mailpoet_text::placeholder{color:var(--ink-soft);opacity:.85;}
.signup-live .mailpoet_text:focus{outline:2px solid var(--terracotta);outline-offset:1px;border-color:var(--terracotta);}
.signup-live .mailpoet_submit{
  display:block;width:100% !important;box-sizing:border-box;padding:14px 20px !important;margin:0 !important;
  font:inherit;font-size:1rem;font-weight:600;color:var(--white) !important;background:var(--terracotta) !important;
  border:0 !important;border-radius:8px !important;cursor:pointer;transition:background .15s ease;
}
.signup-live .mailpoet_submit:hover,
.signup-live .mailpoet_submit:focus-visible{background:var(--terracotta-deep) !important;}
.signup-live .mailpoet_submit:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.signup-live .mailpoet_form_paragraph,
.signup-live .pawspace-consent{margin:6px auto 0 !important;max-width:none;font-size:.85rem;line-height:1.5;color:var(--ink-soft);text-align:center;}
.signup-live .mailpoet_form_paragraph a,
.signup-live .pawspace-consent a{color:var(--terracotta-deep);text-decoration:underline;}
.signup-live .mailpoet_message{margin:12px 0 0;text-align:center;}
.signup-live .mailpoet_validate_success{color:var(--sage);font-weight:600;}
.signup-live .mailpoet_validate_error,
.signup-live .mailpoet_error_1rxax,
.signup-live .parsley-errors-list{color:#a3331f;font-size:.88rem;}
@media (max-width:520px){
  .signup.signup-live{padding:32px 18px;}
  .signup-live .mailpoet_text,.signup-live .mailpoet_submit{font-size:16px;}
}