/* Thames Valley FibroScan — holding page
   Base styles, hover/focus states and responsive rules.
   Layout/visual styles are inline in index.html (from the approved design). */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  color: #14314F;
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}
a { color: #1C8C8C; text-decoration: none; }
a:hover { color: #14314F; }
p { line-height: 1.75; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #14314F; color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* Buttons and link hovers (replaces the design's style-hover attributes) */
.btn-teal { transition: background 0.15s ease; }
.btn-teal:hover { background: #166f6f !important; color: #FFFFFF !important; }
.btn-teal-light:hover { background: #4FB3A6 !important; color: #FFFFFF !important; }
.footer-link:hover { color: #FFFFFF !important; }

/* Form fields (replaces style-focus) */
.field {
  width: 100%; padding: 13px 14px; border: 1px solid #D6E0E4; border-radius: 9px;
  font-family: 'Montserrat', sans-serif; font-size: 15px; color: #14314F; background: #FFFFFF;
}
.field:focus { border-color: #1C8C8C; outline: none; }
textarea.field { resize: vertical; }

/* Contact email can be a long unbreakable token; let it wrap on narrow screens */
.contact-email { flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
@media (max-width: 380px) { .contact-email { font-size: 14px !important; } }

/* Honeypot — hidden from humans, visible to bots */
.hp-field {
  position: absolute !important; left: -9999px !important;
  height: 1px; width: 1px; overflow: hidden;
}

/* Form status message */
.form-status { display: none; margin-top: 16px; font-size: 15px; font-weight: 500; }
.form-status.ok { display: block; color: #166f6f; }
.form-status.error { display: block; color: #B4232A; }

/* Carebit booking embed */
.carebit-wrap {
  width: 100%; height: 760px;
  border: 1px solid #E4ECEE; border-radius: 16px;
  overflow: hidden; background: #F7FAFB;
}
.carebit-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Accordion */
.acc-body { display: none; }
.acc-item.open .acc-body { display: block; }

/* Mobile nav */
.mobile-menu { display: none; }
.mobile-menu.open { display: flex; }

/* Responsive (from the approved design) */
@media (max-width: 900px) {
  [data-nav-desktop] { display: none !important; }
  [data-nav-toggle] { display: block !important; }
  [data-hero-grid] { grid-template-columns: 1fr !important; gap: 40px !important; padding-top: 56px !important; }
  [data-hero-visual] { min-height: 0 !important; }
  [data-trust-grid] { grid-template-columns: 1fr !important; gap: 18px !important; }
  [data-why-copy], [data-combine-grid], [data-measure-grid], [data-benefit-grid], [data-form-row] { grid-template-columns: 1fr !important; }
  [data-loc-grid] { grid-template-columns: 1fr !important; }
  [data-about-grid] { grid-template-columns: 1fr !important; gap: 32px !important; text-align: center; }
  [data-contact-grid] { grid-template-columns: 1fr !important; gap: 36px !important; }
  [data-footer-grid] { grid-template-columns: 1fr !important; }
  [data-sticky-book] { display: block !important; }
  .carebit-wrap { height: 820px; border-radius: 12px; }
  body { padding-bottom: 76px; } /* room for the sticky book bar */
}
@media (max-width: 560px) {
  h1 { font-size: 38px !important; }
}

/* Narrow phones, down to 320px: stop fixed-width elements overflowing and
   shrink the oversized headings. */
@media (max-width: 480px) {
  [data-hero-grid] { padding-left: 22px !important; padding-right: 22px !important; }
  [data-hero-visual] > div { width: 258px !important; height: 258px !important; }
  [data-about-grid] > div:first-child > div { width: 240px !important; height: 240px !important; }
  .cta-heading { font-size: 24px !important; line-height: 1.35 !important; }
  #contact-form { padding: 24px !important; }
}
@media (max-width: 380px) {
  h1 { font-size: 30px !important; }
  [data-hero-visual] > div { width: 216px !important; height: 216px !important; }
  [data-hero-visual] > div > div:nth-child(4) { padding: 22px !important; }
  [data-about-grid] > div:first-child > div { width: 208px !important; height: 208px !important; }
  .cta-heading { font-size: 22px !important; }
}