/*
 Theme Name:   MyLostPetAlert
 Theme URI:    https://mylostpetalert.com
 Description:  MyLostPetAlert standalone theme — the go-forward theme (successor to the petsitter-based mlpa-child). Cartographic/civic "Neighborhood" design system.
 Author:       Brian Freeman
 Author URI:   https://mylostpetalert.com
 Version:      1.7.1
 Requires at least: 6.0
 Requires PHP: 8.1
 Text Domain:  mlpa-theme
*/

/* ==========================================================================
   GLOBAL DESIGN TOKENS  ("Neighborhood" / Direction C)
   Namespaced --mlpa-* so they never collide with the temporary petsitter
   parity stylesheet enqueued on legacy surfaces.
   ========================================================================== */
:root{
    --mlpa-ink:#2a2b1f; --mlpa-muted:#726d5f;
    --mlpa-paper:#f6f0e4; --mlpa-paper2:#fbf7ec; --mlpa-land:#e8ecda; --mlpa-line:#e2ddca;
    --mlpa-teal:#3f8a80; --mlpa-teal-deep:#2f6f66; --mlpa-teal-soft:#d9ebe6;
    --mlpa-green:#7ab02f; --mlpa-green-deep:#5f8f22; --mlpa-green-soft:#eaf3d9;
    --mlpa-orange:#e89145; --mlpa-orange-deep:#cc7a2b; --mlpa-orange-soft:#fbe8d3;
    --mlpa-red:#e0432a; --mlpa-red-deep:#c1351f;
    --mlpa-f-disp:"Darker Grotesque", system-ui, sans-serif;
    --mlpa-f-body:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ==========================================================================
   SKIP LINK
   ========================================================================== */
.mlpa-skip-link{ position:absolute; left:-9999px; top:0; z-index:100000; background:#fff; color:var(--mlpa-ink);
    padding:.7em 1.1em; border-radius:0 0 8px 0; font-family:var(--mlpa-f-body); font-weight:700; box-shadow:0 8px 24px -10px rgba(0,0,0,.4); }
.mlpa-skip-link:focus{ left:0; }

/* ==========================================================================
   SITE HEADER  (global chrome — explicit 16px base + em so the petsitter
   62.5% root on legacy pages can't shrink it)
   ========================================================================== */
.site-header{ background:#f6f0e4; border-bottom:1px solid #e4e0cd; font-family:var(--mlpa-f-body); font-size:16px; line-height:1.5; }
.site-header *{ box-sizing:border-box; }
.site-header a{ text-decoration:none; }

.sh-top{ background:#eef0e0; border-bottom:1px solid #dfe2ce; }
.sh-top__in{ max-width:1180px; margin:0 auto; padding:6px clamp(16px,4vw,40px); display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:.8em; }
.sh-counts{ display:flex; align-items:center; gap:16px; color:#726d5f; }
.sh-counts a{ color:inherit; display:inline-flex; align-items:center; gap:.4em; }
.sh-counts a:hover{ color:var(--mlpa-teal-deep); }
.sh-counts i.fa-paw{ color:var(--mlpa-green); }
.sh-counts i.fa-facebook-official{ color:#3b5998; }
.sh-counts i.fa-instagram{ color:#c13584; }
.sh-acct{ display:flex; align-items:center; gap:14px; }
.sh-acct ul{ list-style:none; margin:0; padding:0; display:inline-flex; align-items:center; gap:14px; }
/* Tertiary (Opt Out) menu renders bare <li>s here — kill the stray list marker/dot. */
.sh-acct li{ list-style:none; margin:0; padding:0; display:inline-flex; align-items:center; }
/* Opt Out (hardcoded link OR tertiary-menu links) — muted, distinct from the Login pill */
.sh-optout,
.sh-acct a:not(.sh-login){ color:#847f6f; text-decoration:none; font-weight:600; transition:color .15s ease; }
.sh-optout:hover,
.sh-acct a:not(.sh-login):hover{ color:var(--mlpa-teal); }
.sh-login{ display:inline-flex; align-items:center; gap:.45em; color:var(--mlpa-green-deep); font-weight:700; border:1.5px solid rgba(122,176,47,.5); border-radius:999px; padding:.3em .8em; transition:background-color .15s ease,border-color .15s ease; }
.sh-login:hover{ background:#eef6e1; border-color:var(--mlpa-green); }

.sh-main{ max-width:1180px; margin:0 auto; padding:15px clamp(16px,4vw,40px); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.sh-logo{ display:inline-flex; }
.sh-logo img{ display:block; height:68px; width:auto; max-width:100%; }
.sh-right{ display:flex; align-items:center; gap:clamp(14px,2.4vw,32px); }
.sh-nav{ display:flex; align-items:center; gap:clamp(14px,2.2vw,30px); }
.sh-nav ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:clamp(14px,2.2vw,30px); }
.sh-nav a{ color:#33352a; font-weight:600; font-size:.95em; transition:color .15s ease; }
.sh-nav a:hover,.sh-nav .current-menu-item > a{ color:var(--mlpa-teal); }
.sh-cta{ display:inline-flex; align-items:center; gap:.5em; white-space:nowrap; background:linear-gradient(180deg,var(--mlpa-orange),var(--mlpa-orange-deep)); color:#fff; text-shadow:0 1px 1px rgba(90,40,0,.28); font-family:var(--mlpa-f-disp); font-weight:900; font-size:1.05em; padding:.5em 1.2em; border-radius:10px; box-shadow:0 12px 22px -12px rgba(204,122,43,.7); transition:transform .15s ease; }
.sh-cta:hover{ transform:translateY(-1px); color:#fff; }

/* mobile menu toggle (checkbox hack, no JS dependency) */
.sh-burger{ display:none; }
.sh-burger-btn{ display:none; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--mlpa-line); border-radius:10px; background:#fff; color:var(--mlpa-ink); font-size:1.2em; cursor:pointer; }

@media (max-width:880px){
    .sh-counts{ gap:12px; font-size:.86em; }
    .sh-burger-btn{ display:inline-flex; }
    .sh-nav{ position:absolute; left:0; right:0; top:100%; z-index:50; background:#f6f0e4; border-bottom:1px solid var(--mlpa-line); box-shadow:0 24px 40px -24px rgba(50,50,20,.4); flex-direction:column; align-items:stretch; gap:0; padding:8px clamp(16px,4vw,40px) 16px; max-height:0; overflow:hidden; transition:max-height .25s ease; }
    .sh-nav ul{ flex-direction:column; align-items:stretch; gap:0; width:100%; }
    .sh-nav a{ display:block; padding:.8em 0; border-bottom:1px solid var(--mlpa-line); font-size:1.05em; }
    .sh-main{ position:relative; flex-wrap:wrap; }
    .sh-burger:checked ~ .sh-nav{ max-height:70vh; }
}

/* ==========================================================================
   SITE FOOTER  (Direction C — dark, civic)
   ========================================================================== */
.site-footer{ background:#22261a; color:rgba(238,240,224,.72); font-family:var(--mlpa-f-body); font-size:16px; line-height:1.6; }
.site-footer *{ box-sizing:border-box; }
.site-footer a{ color:rgba(238,240,224,.82); text-decoration:none; }
.site-footer a:hover{ color:#fff; }
.sf-top{ max-width:1180px; margin:0 auto; padding:clamp(40px,6vw,64px) clamp(16px,4vw,40px) 30px; display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:clamp(24px,4vw,56px); }
.sf-brand__logo{ height:38px; width:auto; margin-bottom:14px; filter:brightness(0) invert(1); opacity:.92; }
.sf-brand p{ margin:0; max-width:38ch; font-size:.92em; color:rgba(238,240,224,.6); }
.sf-col h4{ margin:0 0 .8em; font-family:var(--mlpa-f-disp); font-weight:900; font-size:1.25em; color:#fff; letter-spacing:.01em; }
.sf-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55em; font-size:.92em; }
.sf-bottom{ border-top:1px solid rgba(238,240,224,.14); }
.sf-bottom__in{ max-width:1180px; margin:0 auto; padding:18px clamp(16px,4vw,40px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; font-size:.82em; color:rgba(238,240,224,.55); }
.sf-bottom__in nav{ display:flex; gap:16px; flex-wrap:wrap; }
@media (max-width:820px){ .sf-top{ grid-template-columns:1fr 1fr; } .sf-brand{ grid-column:1 / -1; } }
@media (max-width:520px){ .sf-top{ grid-template-columns:1fr; } }