/* ============================================================
   Contact page
   ABOUT-CONTACT-HANDOFF + Contact.dc.html.
   ============================================================ */

/* .osj-slot lives in about.css, which does not load here, so the contact
   studio shot needs its own copy of the box. Duplicated deliberately rather
   than moved to components.css: two pages use it, and a third file loading on
   every request to serve two is the wrong trade. */
.osj-contact .osj-slot {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--sand-100);
}
.osj-contact .osj-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.osj-contact .osj-slot__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--sand-500);
}

/* The dark-band trap: h1-h6 carry --text-strong, which beats inheritance. */
.osj-contact [data-theme="dark"] h1,
.osj-contact [data-theme="dark"] h2 { color: var(--sand-50); }

/* Every display heading. The comp sets these at Archivo 900 UPPERCASE with
   tight negative tracking; the design tokens alone give mixed case a third too
   small, so these literals are taken from the comp's computed styles. */
.osj-contact h1,
.osj-contact h2,
.osj-contact h3 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  text-wrap: pretty;
}

.osj-contact .osj-eyebrow {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-400);
}
.osj-contact .osj-eyebrow--light { color: var(--amber-link); }

/* ---------- Ink header ---------- */
.osj-contact-head {
  background: radial-gradient(110% 170% at 12% 0%, var(--ink-700) 0%, var(--ink-900) 55%, var(--ink-950) 100%);
  color: var(--sand-50);
  padding-block: 64px 68px;
}
.osj-crumbs {
  margin-bottom: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--sand-500);
}
/* inline-block with vertical padding, so the link is a 44px target without
   growing the visible row (handoff: every interactive target is 44px). A bare
   inline <a> here measures 14px tall, which is a thumb-sized miss. */
.osj-crumbs a {
  display: inline-block;
  padding-block: 15px;
  color: var(--sand-400);
}
.osj-crumbs a:hover { color: var(--amber-400); }
.osj-crumbs span { margin: 0 var(--space-2); }
/* The padding above would otherwise push the band 30px taller. */
.osj-crumbs { margin-bottom: var(--space-2); }
.osj-contact-head h1 {
  margin: 0 0 16px;
  font-size: clamp(2.4rem, 3.6vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.028em;
  max-width: 20ch;
}
.osj-contact-head__intro { max-width: 56ch; margin: 0; color: var(--text-on-dark-body); font-size: 1.08rem; line-height: 1.6; }

/* ---------- Channel cards ---------- */
.osj-contact-channels { background: var(--surface-page); padding-block: 56px 40px; }
.osj-contact-channels__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

/* Flex column, as the comp has it: icon, then the label pair, then the note,
   each on its own line. A two-column grid with the icon beside the text made
   the card 151px against the design's 187px and threw the row's rhythm out. */
.osj-channel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px 28px;
  background: #FFFFFF;
  border: 1px solid #E7DECE;
  border-radius: var(--radius-md);
  color: var(--text-body);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.osj-channel:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.osj-channel__icon { color: var(--amber-600); }
.osj-channel__head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.osj-channel__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}
.osj-channel__value {
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  /* info@onesharpjoe.com in a 1/3 column has nowhere to break. */
  overflow-wrap: anywhere;
}
.osj-channel__note { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }

/* ---------- Form + sidebar ---------- */
.osj-contact-body { background: var(--surface-page); padding-block: 20px 88px; }
.osj-contact-body__grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: start; }

.osj-contact-form {
  background: #FFFFFF;
  border: 1px solid #E7DECE;
  border-radius: var(--radius-lg);
  padding: 36px 36px 40px;
  /* The sticky header would otherwise sit on top of the anchored heading when
     a channel card jumps down to #osj-contact-form. */
  scroll-margin-top: calc(var(--header-h) + var(--space-5));
}
.osj-contact-form h2 { margin: 0 0 8px; font-size: 1.5rem; line-height: 1.05; letter-spacing: -0.022em; color: var(--text-strong); }
.osj-contact-form__lede { margin: 0 0 var(--space-6); color: var(--text-muted); }

.osj-contact-form__banner {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.osj-contact-form__banner--ok { background: #EDF6EE; border: 1px solid #BFDCC4; color: #2C5733; }
.osj-contact-form__banner--bad { background: #FBEDED; border: 1px solid #E3C2C2; color: #8A2F2F; }

.osj-contact-form__topics { margin: 0 0 var(--space-5); padding: 0; border: 0; }
.osj-contact-form__topics legend {
  padding: 0;
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.osj-contact-form__chips { display: flex; flex-wrap: wrap; gap: 9px; }

/* Radios styled as chips. The input stays in the DOM and in the tab order so
   the group keeps native single-select and arrow-key behaviour; only its
   appearance is replaced.

   The pill itself is the theme's existing .osj-chip component (components.css,
   shared with the shop filter rail) plus a size modifier. The wrapper carries
   no chip styling: it did once, which drew the component's pill around this
   file's pill and gave every topic a visible ring inside a ring. */
.osj-topic { position: relative; display: inline-flex; }
.osj-topic input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
/* The comp's topic chip: 44px tall, 17px side padding, 14px text. The base
   component is sized for the filter rail, which is smaller. */
.osj-chip--lg {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 17px;
  background: #FDFAF4;
  border-color: #D9CDB8;
  font-size: 14px;
}
.osj-topic input:checked + .osj-chip {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--sand-50);
}
.osj-topic input:focus-visible + .osj-chip { box-shadow: var(--focus-glow); }

.osj-contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }

.osj-field-label { display: block; margin-bottom: var(--space-4); }
.osj-field-label > span { display: block; margin-bottom: var(--space-2); font-weight: var(--weight-medium); color: var(--text-strong); font-size: var(--text-sm); }
.osj-field-label__hint { font-weight: var(--weight-regular); color: var(--text-muted); }
.osj-field-label input,
.osj-field-label textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid #D9CDB8;
  border-radius: var(--radius-sm);
  background: #FDFAF4;
  color: var(--text-strong);
  /* The comp sets 15px. Kept on desktop for fidelity, raised to 16px on phones
     below, because anything under 16px makes iOS Safari zoom the viewport on
     focus and never zoom back (handoff, Accessibility). */
  font-size: 15px;
  font-family: inherit;
  line-height: 1.5;
}
/* rows="6" sets the height; a min-height on top of it makes the box taller
   than the comp's. */
.osj-field-label textarea { resize: vertical; padding: 14px; }
.osj-field-label input::placeholder,
.osj-field-label textarea::placeholder { color: var(--text-muted); }

/* Attachment */
.osj-contact-form__attach {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  border: 1px dashed #D9CDB8;
  border-radius: var(--radius-md);
  background: #FDFAF4;
  cursor: pointer;
}
.osj-contact-form__attach:hover { border-color: var(--amber-500); }
.osj-contact-form__attach-icon { color: var(--amber-600); display: flex; }
.osj-contact-form__attach-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.osj-contact-form__attach-title { font-weight: var(--weight-semibold); color: var(--text-strong); font-size: var(--text-sm); }
.osj-contact-form__attach-note { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.45; overflow-wrap: anywhere; }
.osj-contact-form__attach-btn {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid #D9CDB8;
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-strong);
  white-space: nowrap;
}
/* Visually hidden but focusable, and still inside the label, so the whole
   panel is the click target and Tab still reaches the control. */
.osj-contact-form__attach input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.osj-contact-form__attach:focus-within { box-shadow: var(--focus-glow); border-color: var(--amber-500); }

/* Honeypot. Not display:none: some bots skip hidden fields, and a few screen
   readers announce them anyway, which the aria-hidden on the wrapper handles. */
.osj-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.osj-contact-form__submit { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.osj-contact-form__status { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.osj-contact-form__status[data-state="ok"] { color: #2C5733; }
.osj-contact-form__status[data-state="bad"] { color: #8A2F2F; }

/* Sidebar */
.osj-contact-aside {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.osj-contact-studio { background: #FFFFFF; border: 1px solid #E7DECE; border-radius: var(--radius-lg); overflow: hidden; }
.osj-contact-studio__body { padding: var(--space-5); }
.osj-contact-studio address { font-style: normal; color: var(--text-strong); line-height: 1.6; }
.osj-contact-studio__hours {
  margin: var(--space-3) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.osj-contact-studio__note { margin: var(--space-3) 0 0; font-size: var(--text-sm); line-height: 1.55; color: var(--text-muted); }

.osj-contact-know { background: var(--sand-100); border: 1px solid #E7DECE; border-radius: var(--radius-lg); padding: var(--space-5); }
.osj-contact-know__item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); margin-top: var(--space-4); }
.osj-contact-know__item:first-of-type { margin-top: 0; }
.osj-contact-know__item > span { color: var(--amber-600); display: flex; padding-top: 2px; }
.osj-contact-know__title { margin: 0 0 2px; font-weight: var(--weight-semibold); color: var(--text-strong); font-size: var(--text-sm); }
.osj-contact-know__item p { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); }

/* ---------- FAQ ---------- */
.osj-contact-faq { background: #F5EFE3; padding-block: 80px; }
.osj-contact-faq h2 { margin: 0 0 40px; font-size: 2.2rem; line-height: 1; letter-spacing: -0.026em; color: var(--text-strong); }
.osj-contact-faq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 40px; }
.osj-contact-faq__item h3 { margin: 0 0 8px; font-size: 1.02rem; font-weight: 800; line-height: normal; letter-spacing: 0.01em; color: var(--text-strong); }
.osj-contact-faq__item p { margin: 0; font-size: 14.5px; color: var(--text-body); line-height: 1.6; }

/* ============================================================
   Tablet
   ============================================================ */
@media (max-width: 1000px) {
  .osj-contact-channels__grid { grid-template-columns: 1fr; }
  .osj-contact-body__grid { grid-template-columns: 1fr; }
  /* A sidebar that follows you down a page it now sits below is just a
     jittering box. */
  .osj-contact-aside { position: static; }
}

/* ============================================================
   Phone
   ============================================================ */
@media (max-width: 760px) {
  .osj-contact-head { padding-block: 44px 52px; }
  .osj-contact-channels { padding-block: 40px 24px; }
  .osj-contact-body { padding-block: 16px 56px; }
  .osj-contact-faq { padding-block: 56px; }

  .osj-contact-form { padding: var(--space-5); }
  /* Name/email and game/order stack rather than squeezing two inputs into
     390px. */
  .osj-contact-form__row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }

  /* Browse drops under the copy: three columns leaves the note about 90px
     wide. */
  .osj-contact-form__attach { grid-template-columns: auto 1fr; }
  .osj-contact-form__attach-btn { grid-column: 1 / -1; justify-content: center; }

  .osj-contact-form__submit { flex-direction: column; align-items: stretch; }
  .osj-contact-form__submit .osj-btn { justify-content: center; }
  .osj-contact-form__status { text-align: center; }

  .osj-contact-faq__grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* 16px on anything touch-shaped, overriding the comp's 15px on purpose.
   Scoped wider than the 760px phone pass: iOS Safari zooms on focus for any
   input under 16px and never zooms back, and an iPad in portrait is 768px, so
   a phone-only rule leaves the whole tablet range exposed. */
@media (max-width: 1024px), (hover: none), (pointer: coarse) {
  .osj-field-label input,
  .osj-field-label textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .osj-channel { transition: none; }
  .osj-channel:hover { transform: none; }
}