/*
Theme Name: PetSoMo Directory v2
Theme URI: https://petsomo.com
Author: PetSoMo Team
Description: v2 redesign — new visual system from Claude Design. Coexists with v1 (petsomo-directory) which remains as fallback.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL v2 or later
Text Domain: petsomo-directory-v2
*/

/* ============================================================
   PetSoMo v2 — Shared base CSS
   Extracted from Claude Design system (see design/CONTINUE.md).
   Per-page styles stay inline in each template.
   ============================================================ */

:root{
  --cream:#EEF1F8; --cream-2:#E2E7F2; --paper:#FFFFFF;
  --ink:#101427; --ink-2:#363B52; --ink-3:#6A6F84; --ink-4:#9498A8;
  --line:rgba(16,20,39,.09); --line-2:rgba(16,20,39,.16);
  --brand:#1A3FE0; --brand-2:#0F2BB8; --brand-soft:#DCE3FF;
  --peach:#FFB587; --sun:#FFD24A;
  --pos:#1F8B5E; --pos-soft:#D6EEDD;
  --neg:#B23C26; --neg-soft:#F4D6D0;
  --tile-lav:#E1DDF4; --tile-mint:#D6E8DF; --tile-sky:#D8E3FA;
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:36px; --r-pill:999px;
  --shadow-soft:0 1px 0 rgba(16,20,39,.04), 0 10px 24px -16px rgba(16,20,39,.18);
  --shadow-lift:0 1px 0 rgba(16,20,39,.04), 0 24px 48px -28px rgba(16,20,39,.28);
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Geist','Inter',system-ui,sans-serif;background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5;overflow-x:hidden}
::selection{background:var(--brand);color:#fff}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{display:block;max-width:100%}
h1,h2,h3,h4,h5,h6,p{margin:0}
ul{list-style:none;padding:0;margin:0}

/* Utility */
.eyebrow{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.wrap{max-width:1280px;margin:0 auto;padding:0 28px}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;padding:12px 20px;border-radius:var(--r-pill);transition:transform .15s ease, background .18s ease}
.btn-primary{background:var(--ink);color:var(--cream)}.btn-primary:hover{background:#000;transform:translateY(-1px)}
.btn-brand{background:var(--brand);color:#fff}.btn-brand:hover{background:var(--brand-2);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}.btn-ghost:hover{background:rgba(16,20,39,.04)}
.btn .arrow{transition:transform .2s ease}.btn:hover .arrow{transform:translateX(3px)}

/* Nav — guest (Phase 1) */
.nav-shell{position:fixed;top:18px;left:0;right:0;z-index:50;display:flex;justify-content:center;padding:0 20px;pointer-events:none}
.nav{pointer-events:auto;width:min(1280px,100%);display:flex;align-items:center;gap:8px;padding:10px 10px 10px 22px;border-radius:var(--r-pill);background:rgba(238,241,248,.78);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.nav .brand img{height:34px;width:auto}
.nav-links{display:flex;gap:4px;margin-left:8px}
.nav-link{padding:8px 14px;border-radius:var(--r-pill);font-size:14.5px;font-weight:500;color:var(--ink-2);transition:background .18s ease, color .18s ease}
.nav-link:hover{background:rgba(16,20,39,.05);color:var(--ink)}
.nav .spacer{flex:1}
.nav .signin{padding:8px 14px;font-size:14.5px;color:var(--ink-2);font-weight:500}
.nav .signin:hover{color:var(--ink)}

/* Crumbs */
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:'Geist Mono',monospace;font-size:12px;color:var(--ink-3);letter-spacing:.04em;margin-bottom:24px}
.crumbs a{color:var(--ink-3)}.crumbs a:hover{color:var(--ink)}.crumbs .sep{opacity:.5}.crumbs .here{color:var(--ink);font-weight:500}

main{padding-top:120px;padding-bottom:96px}

/* Footer — 6 col */
.foot{background:var(--ink);color:var(--cream);padding:64px 0 32px}
.foot a{color:var(--cream)}
.foot a:hover{color:#fff;text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:32px;margin-bottom:48px}
@media (max-width:980px){.foot-grid{grid-template-columns:1fr 1fr 1fr;gap:32px 24px}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-brand img{height:32px;width:auto;margin-bottom:18px;filter:brightness(0) invert(1)}
.foot-brand p{font-size:13.5px;color:var(--ink-4);line-height:1.55;max-width:30ch}
.foot h5{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);font-weight:600;margin-bottom:14px}
.foot ul{display:flex;flex-direction:column;gap:8px}
.foot ul a{font-size:13.5px;color:#cfd2dd}
.foot-bot{padding-top:24px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:12.5px;color:var(--ink-4)}
.foot-bot .legal{display:flex;gap:18px}

/* FAQ pattern (reused across pages) */
.faq-item{border-bottom:1px solid var(--line);padding:18px 0}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:17px;color:var(--ink);letter-spacing:-.01em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .plus{display:inline-grid;place-items:center;width:24px;height:24px;border:1px solid var(--line-2);border-radius:50%;font-size:14px;color:var(--ink-2);transition:transform .25s ease, background .2s ease;flex:none}
.faq-item[open] .plus{transform:rotate(45deg);background:var(--ink);color:#fff;border-color:var(--ink)}
.faq-item p{margin-top:12px;font-size:15px;color:var(--ink-2);line-height:1.6;max-width:70ch}