/* Site button styles: solid gold Book buttons site-wide, thin gold outline in the header. Version 3 chosen 10/23:
   compact pill with an arrow and extra space above it in the hero */

/* header: thin gold outline at every size and on every page, so it stays
   available without competing with the filled buttons in the page (10/23) */
header .right a.cta {
  background: transparent; color: var(--ember); border: 1px solid rgba(201,160,106,0.7); font-weight: 500;
}
@media (hover: hover) {
  header .right a.cta:hover { background: var(--ember); color: var(--night); border-color: var(--ember); }
}
@media (max-width: 700px) {
  header .right a.cta { font-size: 10px; letter-spacing: 0.12em; padding: 7px 12px; }
}

/* menu overlay: solid gold */
.menu-overlay a.cta { background: var(--ember); color: var(--night); border-color: var(--ember); font-weight: 600; }
@media (hover: hover) {
  .menu-overlay a.cta:hover { background: #dcb47c; color: var(--night); }
}

/* main buttons */
body .btn {
  background: var(--ember); color: var(--night); border-color: var(--ember);
  font-weight: 600; white-space: nowrap; box-shadow: none;
  font-size: 12px; letter-spacing: 0.16em; padding: 13px 26px 13px 30px;
}
body .btn::after { content: "\2192"; display: inline-block; margin-left: 10px; letter-spacing: 0; transition: transform 0.4s ease; }
body .hero .titles .btn { padding: 13px 26px 13px 30px; margin-top: 64px; }
@media (hover: hover) {
  body .btn:hover { background: #dcb47c; color: var(--night); box-shadow: 0 0 30px rgba(201,160,106,0.3); }
  body .btn:hover::after { transform: translateX(4px); }
}

@media (max-width: 700px) {
  /* tap targets at least 44px tall without making the buttons look bigger */
  body .btn, body .hero .titles .btn {
    letter-spacing: 0.12em; padding: 0 20px 0 24px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  }
  body .hero .titles .btn { margin-top: 44px; }
  /* header pill keeps its size; an invisible margin around it makes the tap area 44px tall */
  header .right a.cta { position: relative; }
  header .right a.cta::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
}