/*!
 * Postcode Tartan — shared interaction & polish layer, loaded on every page
 * in the section ($loadTartanCss). Additive: fixes focus-visibility, touch
 * target sizes and legibility consistently, so the components (defined inline
 * per page) all meet the same bar without per-page patching.
 */

:root { --tt-focus: #13b083; --tt-focus-dark: #c69a4b; }

/* ---- Keyboard focus: every interactive element in the section ---- */
.tartan-nav a:focus-visible,
.tt-btn-gold:focus-visible,
.tt-btn-ghost:focus-visible,
.tt-chip:focus-visible,
.tt-fam:focus-visible,
.tte-tile:focus-visible,
.tws__row button:focus-visible,
.tws__row input:focus-visible,
.tt-cta-row a:focus-visible,
#copy-spec:focus-visible {
  outline: 3px solid var(--tt-focus);
  outline-offset: 2px;
  border-radius: 10px;
}

/* On the dark hero, use the gold so the ring reads on navy */
#generate-btn:focus-visible,
#postcode-input:focus-visible,
.tth__ico:focus-visible,
.tth__share-main:focus-visible,
.tth__dl button:focus-visible,
.tth__bar button:focus-visible,
.tt-swatch:focus-visible,
.ttx__row button:focus-visible,
.ttx__row a:focus-visible,
.ttx__close:focus-visible {
  outline: 3px solid var(--tt-focus-dark);
  outline-offset: 2px;
}
.tt-swatch { border-radius: 10px; }               /* so its focus ring is round-cornered */

/* Make the clickable hero swatch keyboard-reachable */
.tt-swatch[role],
.tt-swatch { }

/* ---- Legibility bumps ---- */
.tt-sw-chip .h { font-size: .74rem; }
.tt-binary, .tws__bits { font-size: .7rem; }

/* ---- Touch targets (mobile) ---- */
@media (max-width: 640px) {
  .tt-chip {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    padding-top: .55rem;
    padding-bottom: .55rem;
  }
  .tartan-nav a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
  }
  /* downloads become real tappable pills, not thin text */
  .tth__dl {
    gap: .55rem;
    flex-wrap: wrap;
  }
  .tth__dl button {
    min-height: 44px;
    padding: .55rem 1rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
  }
  .tth__dl button:hover { color: #fff; }
  .tt-btn-gold,
  .tt-btn-ghost {
    min-height: 46px;
    justify-content: center;
    flex: 1 1 auto;
  }
  .tt-cta-row { width: 100%; }
  /* ensure the modal action buttons are comfortable to tap */
  .ttx__row button,
  .ttx__row a { min-height: 44px; display: inline-flex; align-items: center; }
}