/* Hover and focus states from the design. These are the only rules that
   cannot live as inline styles; every other style is inline, as designed. */
.f-bbc:focus { border-bottom-color:#C4914F; }
.f-bc:focus { border-color:#C4914F; }
.h-bc:hover { border-color:#C4914F; }
.h-bg:hover { background:#D7A868; }
.h-co:hover { color:#D7A868; }

/* Error state. The design has no error colour; this terracotta is the
   one addition, chosen to sit warm alongside the brass accent. */
.rfq-error { color:#E0705C !important; }

/* Tap targets. The nav links render 15px tall, which is too small to hit
   reliably on a phone. A positioned pseudo-element enlarges the tappable
   area to fill its row and half the gap on each side — about 26px, meeting
   the WCAG 2.2 AA minimum of 24x24 — without moving a single pixel of
   layout. Padding would have changed the flex gaps and shifted the text. */
header nav a { position: relative; }
header nav a::after {
  content: "";
  position: absolute;
  top: -6px; bottom: -6px; left: -6px; right: -6px;
}

/* The menu button is desktop-invisible; below 768px it replaces the nav. */
#nav-toggle { display: none; }

@media (max-width: 767px) {
  header > div { flex-wrap: wrap; }

  #nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    padding: 0; margin: -4px 0;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    cursor: pointer;
  }
  #nav-toggle:hover, #nav-toggle:focus-visible { border-color: #C4914F; }
  #nav-toggle span {
    display: block; width: 18px; height: 1.5px;
    background: #ECEAE5;
    transition: transform .18s ease, opacity .18s ease;
  }
  header[data-nav-open] #nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  header[data-nav-open] #nav-toggle span:nth-child(2) { opacity: 0; }
  header[data-nav-open] #nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  #site-nav {
    /* !important: the design sets display/gap/alignment inline
       on <nav>, and inline styles outrank a stylesheet rule. */
    display: none !important;
    flex-basis: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 14px 0 2px;
    border-top: 1px solid rgba(255,255,255,0.14);
  }
  header[data-nav-open] #site-nav { display: flex !important; }
  #site-nav a {
    padding: 15px 2px;
    font-size: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  #site-nav a:last-child { border-bottom: none; }
  /* Already 47px tall here, so the hit-area pseudo-element is redundant. */
  #site-nav a::after { content: none; }
}

/* Same treatment for the small links in the footer. */
footer a { position: relative; }
footer a::after {
  content: "";
  position: absolute;
  top: -8px; bottom: -8px; left: -4px; right: -4px;
}