/* ── Static-port additions (Cloudflare rebuild, 2026-09-11) ─────────
   Everything visual still comes from the original zeus stylesheets;
   this file only covers what the WP → static port changed. */

/* Screen-reader-only utility (zeus never defines one) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Thornwood footer credit — wordmark standard (footer bg #fff) */
.design-credit { font-size: 14px; margin: 6px 0 0; }
.foot-credit { text-align: center; margin: 14px 0 0; }
.foot-credit-label { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #6c6c6c; }
.foot-credit a { display: inline-block; margin-top: 8px; opacity: .85; transition: opacity .25s ease, transform .25s ease; }
.foot-credit a:hover, .foot-credit a:focus-visible { opacity: 1; transform: translateY(-1px); }
.foot-credit a:focus-visible { outline: 2px solid #2b4042; outline-offset: 3px; }
.foot-credit-logo { display: block; height: clamp(24px, 2vw, 30px); width: auto; margin: 0 auto; max-width: none; }

/* Mobile menu button: the theme styled a <div>; keep the button unstyled */
button.menu-btn { background: none; border: 0; padding: 0; -webkit-appearance: none; appearance: none; font: inherit; color: inherit; cursor: pointer; }
button.menu-btn:focus-visible { outline: 2px solid #2b4042; outline-offset: 3px; }

/* Form status line (replaces the CF7 response output) */
.form-status { display: none; margin-top: 16px; padding: 10px 14px; border: 2px solid; font-size: 16px; text-align: center; }
.form-status.ok { display: block; border-color: #46b450; color: inherit; background: #fff; }
.form-status.err { display: block; border-color: #dc3232; color: #dc3232; background: #fff; }
form.sending .wpcf7-submit, form.sending button[type="submit"] { opacity: .5; }

/* Mailchimp footer signup — the plugin's inline styles, without the CDN stylesheet */
#mc_embed_signup { background: #fff; clear: left; font: 14px Helvetica, Arial, sans-serif; max-width: 600px; }

/* Email-signup popup (theme functions.php inline <style>, moved here) */
.parade-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 999999; align-items: center; justify-content: center; padding: 20px; }
.parade-modal.show { display: flex; }
.parade-modal-content { background: #fff; max-width: 460px; width: 100%; padding: 35px; position: relative; text-align: center; }
.parade-modal-content h2 { margin: 0 0 10px; }
.parade-modal-content p { margin: 0 0 20px; }
.parade-modal-content input { width: 100%; padding: 12px; margin-bottom: 12px; border: 1px solid #ccc; font: inherit; }
.parade-modal-content button[type="submit"] { width: 100%; padding: 12px; background: #2b4042; color: #fff; border: none; cursor: pointer; font: inherit; letter-spacing: .05em; transition: background .25s ease; }
.parade-modal-content button[type="submit"]:hover, .parade-modal-content button[type="submit"]:focus-visible { background: #ad8787; }
.parade-modal-close { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 28px; line-height: 1; cursor: pointer; color: #2b4042; }

/* Clickable project / collaboration / showcase cards (Jax, 2026-09-11):
   the thumbnail and the title now open the project, not just the text link. */
.card-img { display: block; overflow: hidden; }
.card-img img { transition: transform .5s ease, opacity .3s ease; }
.project-box:hover .card-img img, .collab-box:hover .card-img img, .showcase:hover .card-img img { transform: scale(1.03); }
.card-title, .card-title:hover, .card-title:focus { color: inherit; text-decoration: none; }
.card-title:hover { opacity: .75; }
.card-title:focus-visible { outline: 2px solid #ad8787; outline-offset: 3px; }

/* Store link on the shop category pages (they list no products on the site itself) */
.store-cta { margin: 28px auto 0; max-width: 720px; }
.store-cta p { margin-bottom: 16px; }

/* Instagram feed (replaces the Smash Balloon plugin markup; 4 / 2 columns like the live feed) */
.ig-feed { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding-bottom: 12px; }
.ig-item { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #f7f5ef; }
.ig-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease, opacity .3s ease; }
.ig-item:hover img, .ig-item:focus-visible img { transform: scale(1.04); opacity: .85; }
.ig-item:focus-visible { outline: 2px solid #ad8787; outline-offset: 3px; }
.ig-badge { position: absolute; top: 10px; right: 10px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.ig-badge.ig-play { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; }
@media (max-width: 767px) { .ig-feed { grid-template-columns: repeat(2, 1fr); } }

/* Widescreen frame: constrain fixed chrome to the 1920px canvas */
@media (min-width: 1921px) {
  .header, .mobile-header, .mobile-nav-menu { left: calc((100vw - 1920px) / 2); right: calc((100vw - 1920px) / 2); }
  #back-to-top { right: calc((100vw - 1920px) / 2 + 15px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .animate, .animate-item { opacity: 1 !important; transform: none !important; }
}

/* a11y: color-only links inside text blocks get an underline */
.slug-links a { text-decoration: underline; }
.post_content p a:not(.main-btn):not(.main-btn2), .attribution a, .design-credit a, .foot-info p a, .hero-unit a:not(.main-btn) { text-decoration: underline; }
/* a11y: focus ring for keyboard users on nav + buttons */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid #ad8787; outline-offset: 2px; }
#back-to-top { cursor: pointer; }