/* The Surveying Academy — production styles.
   Generated from the approved design. Inline element styles carry the layout;
   this file holds only what cannot be expressed inline. */

* { box-sizing: border-box; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px;
}
.tsa-on { color: #dbc27d !important; position: relative; }
.tsa-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: #dbc27d; }
.tsa-skip { position: absolute; left: -9999px; top: 0; z-index: 200; }
.tsa-skip:focus { left: 12px; top: 12px; background: #dbc27d; color: #133041; padding: 12px 18px; border-radius: 2px; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; }
body { margin: 0; background: #f8f6f1; font-family: 'Jost','Futura PT','Trebuchet MS',sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #133041; }
a:hover { color: #c4a55a; }
.tsa-desk { display: none; }
.tsa-sep { display: none; width: 1px; height: 22px; background: rgba(219,194,125,0.32); }
.tsa-menubtn { display: inline-flex; }
.tsa-hide-xs { display: none; }
@media (min-width: 560px) { .tsa-hide-xs { display: inline; } }
.tsa-mark { height: 28px; }
.tsa-word { display: none; height: 30px; }
.tsa-headrow > a { min-width: 0; }
/* footer columns: one up to 560px, two until the desktop nav appears at
   1020px, four from there — auto-fit orphaned the last column in the
   1020-1280px band, where the full desktop header is already showing. */
.tsa-footgrid { grid-template-columns: minmax(0,1fr) !important; }
@media (min-width: 560px) { .tsa-footgrid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } }
@media (min-width: 1020px) { .tsa-footgrid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; } }
.tsa-headrow { gap: 12px !important; }
.tsa-nav { gap: 10px !important; }
@media (min-width: 460px) {
  .tsa-word { display: block; }
}
@media (min-width: 560px) {
  .tsa-mark { height: 38px; }
  .tsa-word { height: 40px; }
  .tsa-headrow { gap: 24px !important; }
  .tsa-nav { gap: clamp(14px,2vw,28px) !important; }
}
@media (min-width: 1020px) {
  .tsa-desk { display: inline-block; }
  .tsa-sep { display: block; }
  .tsa-menubtn { display: none; }
}
/* The full desktop nav needs ~1060px to sit inside the 48px page padding.
   Between its 1020px switch-on and there, tighten the nav gap rather than
   letting the row eat its right padding (and scroll 1px at exactly 1020). */
@media (min-width: 1020px) and (max-width: 1099px) {
  .tsa-nav { gap: 12px !important; }
}
/* Header "Buy a seat": only shown once the full row fits; below that it lives in the burger menu. */
.tsa-nav a { white-space: nowrap; }
.tsa-buy { display: none !important; }
@media (min-width: 1280px) {
  .tsa-buy { display: inline-block !important; }
  .tsa-nav { gap: clamp(14px,1.4vw,28px) !important; }
}

img { max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* hover states lifted from the design's style-hover attributes */
.hv0:hover { color: #dbc27d; }
.hv1:hover { background: #e9d5a1; }
.hv2:hover { border-color: #dbc27d; color: #dbc27d; }
.hv3:hover { color: #f8f6f1; border-bottom-color: #f8f6f1; }
.hv4:hover { border-bottom-color: #133041; }
.hv5:hover { background: #0d2130; }
.hv6:hover { background: rgba(19,48,65,0.06); }
.hv7:hover { border-bottom-color: #dbc27d; color: #e9d5a1; }
.hv8:hover { border-color: #c4a55a; }

/* cookie consent — required for GA4 / Clarity under UK PECR */
/* The bottom padding keeps the buttons clear of the "Powered by Netlify"
   badge, which is fixed to the bottom-right corner above the banner. */
#tsa-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; background: #0d2130; color: #f8f6f1; border-top: 1px solid rgba(219,194,125,0.4); padding: 20px clamp(20px,4vw,48px) 60px; }
#tsa-consent .inner { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; justify-content: space-between; }
#tsa-consent p { margin: 0; font-size: 0.9375rem; line-height: 1.7; max-width: 62ch; color: rgba(248,246,241,0.85); }
#tsa-consent a { color: #dbc27d; }
#tsa-consent .acts { display: flex; gap: 12px; flex-wrap: wrap; }
#tsa-consent button { font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; padding: 14px 24px; border-radius: 2px; cursor: pointer; }
#tsa-consent .accept { background: #dbc27d; color: #133041; border: none; }
#tsa-consent .accept:hover { background: #e9d5a1; }
#tsa-consent .reject { background: transparent; color: #f8f6f1; border: 1px solid rgba(248,246,241,0.4); }
#tsa-consent .reject:hover { border-color: #dbc27d; color: #dbc27d; }

/* free-place sticky mobile CTA (toggled by app.js) */
.tsa-sticky { display: flex; align-items: center; justify-content: center; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 150; min-height: 52px; background: #dbc27d; color: #133041; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; border-radius: 2px; box-shadow: 0 8px 24px rgba(13,33,48,0.35); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 250ms cubic-bezier(0.25,0.46,0.45,0.94), transform 250ms cubic-bezier(0.25,0.46,0.45,0.94); }
.tsa-sticky.is-on { opacity: 1; transform: none; pointer-events: auto; }
.tsa-sticky:hover { background: #c4a55a; }
@media (min-width: 760px) { .tsa-sticky { left: auto; right: 28px; bottom: 28px; padding: 0 32px; min-height: 56px; } }

/* paired commercial CTAs: side by side on desktop, stacked full-width on phones */
.tsa-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.tsa-ctas > a { display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; }
@media (max-width: 559px) {
  .tsa-ctas { flex-direction: column; align-items: stretch; }
  .tsa-ctas > a { width: 100%; padding-left: 14px !important; padding-right: 14px !important; letter-spacing: 0.1em !important; }
}
@media (max-width: 379px) { .tsa-ctas > a { font-size: 11px !important; letter-spacing: 0.08em !important; } }