/* SwitchHousing shared site styles — header, footer, buttons, forms and listing cards.
   Tokens follow brand_assets/switchhousing/brand.lock.json (navy ground, cream surface, gold accent, teal secondary).
   Components are `sh-` prefixed so pages with their own inline styles (e.g. /listing/) can include this safely. */
:root{
  --sh-navy:#080B12; --sh-navy2:#0E1320; --sh-panel:#131A2A;
  --sh-cream:#F5F1E8; --sh-cream2:#EDE7DA; --sh-line-cream:#E0D8C8;
  --sh-ink:#171A22; --sh-ink-dim:#5C6270; --sh-on-dark:#F3EFE6; --sh-on-dark-dim:#B9BFCB;
  --sh-gold:#E8B25A; --sh-gold2:#f2c877; --sh-gold-ink:#8a5e14; --sh-teal:#4BC0B4; --sh-teal-ink:#0f7f75;
  --sh-danger:#9b2c2c;
  --sh-sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --sh-serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  --sh-radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
.sh-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.sh-wrap{max-width:1160px;margin:0 auto;padding-left:20px;padding-right:20px}
.sh-skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--sh-gold);color:#1a1204;padding:10px 14px;border-radius:8px;font:700 14px var(--sh-sans)}
.sh-skip:focus{left:12px}
:focus-visible{outline:3px solid var(--sh-teal);outline-offset:2px}

/* buttons */
.sh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 22px;border-radius:999px;
  font:700 15px/1.1 var(--sh-sans);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:filter .15s,transform .15s,background .15s}
.sh-btn:hover{transform:translateY(-1px)}
.sh-btn-gold{background:var(--sh-gold);color:#1a1204}
.sh-btn-gold:hover{background:var(--sh-gold2)}
.sh-btn-light{background:transparent;color:var(--sh-on-dark);border-color:rgba(243,239,230,.55)}
.sh-btn-light:hover{border-color:var(--sh-gold2);color:var(--sh-gold2)}
.sh-btn-navy{background:var(--sh-navy);color:var(--sh-on-dark)}
.sh-btn-navy:hover{background:#1a2233}
.sh-btn-outline{background:transparent;color:var(--sh-ink);border-color:var(--sh-ink)}
.sh-btn-outline:hover{background:var(--sh-ink);color:var(--sh-cream)}
.sh-btn[disabled]{opacity:.6;cursor:default;transform:none}
.sh-link{color:var(--sh-teal-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* header */
.sh-header{position:sticky;top:0;z-index:50;background:var(--sh-navy);color:var(--sh-on-dark);border-bottom:1px solid rgba(255,255,255,.08);font-family:var(--sh-sans)}
.sh-bar{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:22px;padding:10px 20px;min-height:64px}
.sh-brand{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font:600 20px/1 var(--sh-serif);letter-spacing:-.01em;white-space:nowrap}
.sh-brand img{display:block;border-radius:50%;width:40px;height:40px}
.sh-nav{display:flex;gap:4px;margin-left:auto}
.sh-nav a{color:var(--sh-on-dark-dim);text-decoration:none;font-size:14.5px;font-weight:600;padding:10px 12px;border-radius:8px}
.sh-nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.sh-nav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -2px 0 var(--sh-gold)}
.sh-bar-cta{min-height:40px;padding:9px 18px;font-size:14px}
.sh-menu-btn{display:none;margin-left:auto;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:999px;
  background:transparent;color:var(--sh-on-dark);border:1px solid rgba(243,239,230,.35);font:700 14px var(--sh-sans);cursor:pointer}
.sh-menu-icon,.sh-menu-icon::before,.sh-menu-icon::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .2s}
.sh-menu-icon::before,.sh-menu-icon::after{content:"";position:absolute;left:0}
.sh-menu-icon::before{top:-6px}.sh-menu-icon::after{top:6px}
.sh-menu-btn[aria-expanded="true"] .sh-menu-icon{background:transparent}
.sh-menu-btn[aria-expanded="true"] .sh-menu-icon::before{top:0;transform:rotate(45deg)}
.sh-menu-btn[aria-expanded="true"] .sh-menu-icon::after{top:0;transform:rotate(-45deg)}
.sh-menu{border-top:1px solid rgba(255,255,255,.08);background:var(--sh-navy);max-height:calc(100vh - 64px);overflow:auto}
.sh-menu nav{display:flex;flex-direction:column;padding:8px 20px 22px;gap:2px}
.sh-menu a:not(.sh-btn){color:var(--sh-on-dark);text-decoration:none;font-size:17px;font-weight:600;padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.07)}
.sh-menu a.sh-sub{padding-left:18px;font-size:16px;color:var(--sh-on-dark-dim)}
.sh-menu a[aria-current="page"]{color:var(--sh-gold2)}
.sh-menu-group{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sh-gold);padding:16px 4px 4px}
.sh-menu .sh-btn{margin-top:16px}
@media (max-width:900px){
  .sh-nav,.sh-bar-cta{display:none}
  .sh-menu-btn{display:inline-flex}
}
@media (min-width:901px){.sh-menu{display:none!important}}

/* footer */
.sh-footer{background:var(--sh-navy);color:var(--sh-on-dark-dim);font:14px/1.6 var(--sh-sans);padding:44px 0 26px;margin-top:0}
.sh-footer .sh-brand{color:var(--sh-on-dark);font-size:18px}
.sh-footer .sh-brand img{width:36px;height:36px}
.sh-footer a{color:var(--sh-on-dark)}
.sh-footer-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}
.sh-footer-tag{margin:12px 0 4px}
.sh-footer-contact{margin:0}
.sh-footer-links{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;align-content:start}
.sh-footer-links a{text-decoration:none;padding:4px 0}
.sh-footer-links a:hover{color:var(--sh-gold2)}
.sh-footer-legal{border-top:1px solid rgba(255,255,255,.08);margin-top:28px;padding-top:18px;font-size:12.5px;color:#8c93a1}
.sh-footer-legal p{margin:0 0 8px;max-width:90ch}
@media (max-width:700px){.sh-footer-grid{grid-template-columns:1fr}}

/* page type */
.sh-eyebrow{font:800 12px/1.2 var(--sh-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--sh-gold-ink);margin:0 0 10px}
.sh-h1{font:500 clamp(34px,5.2vw,58px)/1.05 var(--sh-serif);letter-spacing:-.015em;margin:0;text-wrap:balance}
.sh-h2{font:500 clamp(28px,3.6vw,42px)/1.1 var(--sh-serif);letter-spacing:-.01em;margin:0;text-wrap:balance}
.sh-lede{font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:var(--sh-ink-dim);max-width:62ch;margin:14px 0 0}

/* listing cards (server-rendered on /for-sale/ and the homepage) */
.sh-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:980px){.sh-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.sh-cards{grid-template-columns:1fr}}
.sh-card{display:flex;flex-direction:column;background:#fffdf8;border:1px solid var(--sh-line-cream);border-radius:var(--sh-radius);overflow:hidden;font-family:var(--sh-sans);color:var(--sh-ink)}
/* brochures are portrait flyers whose top ~37% is the property photo: a 2:1 top crop shows the photo, not the flyer's text */
.sh-card-media{position:relative;display:block;aspect-ratio:2/1;background:#0d1119;overflow:hidden}
.sh-card-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.sh-card-media.wide img{object-fit:contain;object-position:center;background:#0d1119}
.sh-card-tag{position:absolute;left:10px;bottom:10px;background:rgba(8,11,18,.82);color:#E9E4D9;font-size:11.5px;font-weight:700;letter-spacing:.02em;padding:5px 9px;border-radius:999px}
.sh-card-body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px;flex:1}
.sh-card-eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sh-teal-ink)}
.sh-card h3{font:600 19px/1.25 var(--sh-serif);margin:0}
.sh-card-loc{font-size:14px;color:var(--sh-ink-dim);margin:0}
.sh-card-price{font-size:20px;font-weight:800;margin:6px 0 0}
.sh-card-price.on-request{font-size:17px;color:var(--sh-ink-dim)}
.sh-card-facts{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0;list-style:none}
.sh-card-facts li{font-size:13px;background:var(--sh-cream);border:1px solid var(--sh-line-cream);border-radius:999px;padding:3px 10px}
.sh-card .sh-btn{margin-top:auto;align-self:flex-start}
.sh-card-cta{padding-top:12px;margin-top:auto}

/* forms (move request + rental search) */
.sh-form{font-family:var(--sh-sans);color:var(--sh-ink)}
.sh-form fieldset{border:0;padding:0;margin:0 0 22px;min-width:0}
.sh-form legend{font:600 20px/1.3 var(--sh-serif);padding:0;margin:0 0 12px}
.sh-field{margin:0 0 16px}
.sh-field label,.sh-field .sh-label{display:block;font-size:14px;font-weight:700;margin:0 0 6px}
.sh-opt{font-weight:500;color:var(--sh-ink-dim)}
.sh-help{font-size:13px;color:var(--sh-ink-dim);margin:4px 0 0}
.sh-form input[type=text],.sh-form input[type=email],.sh-form input[type=tel],.sh-form input[type=month],.sh-form select,.sh-form textarea{
  width:100%;min-height:48px;font:16px var(--sh-sans);color:var(--sh-ink);background:#fff;border:1px solid #cfc6b4;border-radius:10px;padding:11px 13px}
.sh-form textarea{min-height:96px;resize:vertical}
.sh-form input:focus,.sh-form select:focus,.sh-form textarea:focus{outline:3px solid rgba(75,192,180,.45);outline-offset:0;border-color:var(--sh-teal-ink)}
.sh-form [aria-invalid="true"]{border-color:var(--sh-danger);background:#fdf4f3}
.sh-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:640px){.sh-grid2{grid-template-columns:1fr}}
.sh-choices{display:flex;flex-wrap:wrap;gap:8px}
.sh-choice{position:relative}
.sh-choice input{position:absolute;opacity:0;width:1px;height:1px}
.sh-choice span{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid #cfc6b4;border-radius:999px;background:#fff;font-size:15px;font-weight:600;cursor:pointer}
.sh-choice input:checked+span{background:var(--sh-navy);border-color:var(--sh-navy);color:var(--sh-on-dark)}
.sh-choice input:focus-visible+span{outline:3px solid var(--sh-teal);outline-offset:2px}
.sh-err{color:var(--sh-danger);font-size:13.5px;font-weight:600;margin:6px 0 0}
.sh-err:empty{display:none}
.sh-field label.sh-consent,.sh-consent{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;font-weight:500;line-height:1.5}
.sh-consent input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:var(--sh-navy)}
.sh-hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.sh-alert{border-radius:10px;padding:12px 14px;font-size:14.5px;margin:0 0 16px}
.sh-alert-err{background:#fbeaea;border:1px solid #d98a8a;color:#7a2424}
.sh-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:8px}
.sh-privacy{font-size:13px;color:var(--sh-ink-dim);margin:14px 0 0;max-width:62ch}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.sh-btn:hover{transform:none}}