/*
 * Styles for the blocks the SEO work added.
 *
 * Kept in their own file rather than appended to style.css so the SEO change set
 * is reviewable and reversible on its own. Colours, radii and shadows are taken
 * from the existing components (.scan-card, .location-card, .scan-btn-primary) so
 * these read as part of the same design rather than as bolted-on SEO furniture.
 */

/* --------------------------------------------------------------------------
 * "What you receive" - the terms that used to repeat once per scan card
 * ----------------------------------------------------------------------- */

.what-you-receive {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  padding: 32px 40px;
  margin: 40px 0;
}

.what-you-receive h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 20px;
}

.what-you-receive-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px 32px;
}

.what-you-receive-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: #444;
}

.what-you-receive-list i {
  color: #009dff;
  font-size: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
 * Where a scan is available, and which scans a practice offers
 * ----------------------------------------------------------------------- */

.scan-availability {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  padding: 32px 40px;
  margin: 40px 0;
}

.scan-availability h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 20px;
}

.scan-availability-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.scan-availability-list li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #eef1f5;
  font-size: 15px;
  color: #444;
}

.scan-availability-list li:last-child {
  border-bottom: 0;
}

.scan-availability-list i {
  color: #009dff;
  flex-shrink: 0;
}

.scan-availability-list a {
  color: #1a1a2e;
  font-weight: 600;
  text-decoration: none;
}

.scan-availability-list a:hover {
  color: #009dff;
}

.scan-availability-address {
  color: #777;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
 * Previous / next scan in the pregnancy timeline
 * ----------------------------------------------------------------------- */

.scan-timeline-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 40px 0;
}

.scan-timeline-nav a {
  display: block;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  padding: 20px 24px;
  text-decoration: none;
  color: #1a1a2e;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.scan-timeline-nav a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0, 157, 255, 0.18);
}

.scan-timeline-nav span {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #777;
  margin-bottom: 4px;
}

.scan-timeline-nav strong {
  font-size: 17px;
  font-weight: 600;
}

.scan-timeline-nav i {
  color: #009dff;
  margin-bottom: 8px;
  display: inline-block;
}

.scan-timeline-next {
  text-align: right;
}

/* --------------------------------------------------------------------------
 * The scan CTA that closes every article
 * ----------------------------------------------------------------------- */

.article-scan-cta {
  background: linear-gradient(135deg, #f4faff 0%, #eef6ff 100%);
  border: 1px solid #dceeff;
  border-radius: 16px;
  padding: 28px 32px;
  margin: 40px 0 24px;
}

.article-scan-cta h2 {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 10px;
}

.article-scan-cta p {
  font-size: 16px;
  line-height: 1.7;
  color: #444;
  margin: 0 0 18px;
}

.article-scan-cta .scan-btn-primary,
.article-scan-cta .scan-btn-secondary {
  flex: 0 0 auto;
  display: inline-flex;
  margin-right: 10px;
}

/* --------------------------------------------------------------------------
 * Footer: name / address / phone, WhatsApp and the Facebook label
 * ----------------------------------------------------------------------- */

.footer-nap {
  align-items: flex-start;
  line-height: 1.7;
}

.footer-nap strong {
  color: #fff;
}

/* The contact card now has two buttons. They are inline-flex, so as siblings they
   wrap onto a second line and any margin on the second one indents it rather than
   spacing it - which is exactly what a left margin did. A flex row with a gap puts
   them side by side and keeps them flush left when they wrap. */
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.social-icon .social-label {
  margin-left: 8px;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
 * Practice pages
 * ----------------------------------------------------------------------- */

.locations-grid-single {
  grid-template-columns: 1fr;
  max-width: 900px;
  margin: 0 auto;
}

.location-content h2 {
  font-size: 26px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 16px;
}

/* The detail rows label their content; the label is a heading for the outline,
   not a section title, so it stays at label size. */
.location-detail-item h2 {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 4px;
}

.location-content h2 a {
  color: inherit;
  text-decoration: none;
}

.location-content h2 a:hover {
  color: #009dff;
}

@media (max-width: 767px) {
  .what-you-receive,
  .scan-availability {
    padding: 24px 20px;
  }

  .scan-timeline-next {
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
 * <picture> wrappers
 *
 * The card and detail image frames size their <img> with width/height 100%.
 * A <picture> is display:inline, so it would collapse between the frame and the
 * image and leave the height with nothing to resolve against.
 * ----------------------------------------------------------------------- */

.scan-card-image picture,
.product-card-image picture,
.scan-details-image picture,
.welcome-image-main picture,
.welcome-image-accent picture,
.logo picture,
.footer-logo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.logo picture,
.footer-logo picture {
  height: auto;
}

/* --------------------------------------------------------------------------
 * Contact form honeypot
 *
 * Moved out of view rather than display:none - a bot worth stopping checks for
 * the obvious hiding methods and skips those fields.
 * ----------------------------------------------------------------------- */

.contact-form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
 * Article body elements
 *
 * bin/seo-fix-markdown.php converts leftover markdown into real HTML, which
 * introduces tables and lists into article bodies for the first time. Without
 * these they render unstyled against the rest of the page.
 * ----------------------------------------------------------------------- */

.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15px;
}

.article-content th,
.article-content td {
  padding: 10px 14px;
  border: 1px solid #e4e9f0;
  text-align: left;
  vertical-align: top;
}

.article-content th {
  background: #f4faff;
  color: #1a1a2e;
  font-weight: 700;
}

.article-content tbody tr:nth-child(even) {
  background: #fafcfe;
}

/* A wide table must scroll inside itself rather than widening the page */
.article-content .table-scroll {
  overflow-x: auto;
}

.article-content ul,
.article-content ol {
  margin: 16px 0;
  padding-left: 22px;
}

.article-content li {
  margin-bottom: 8px;
  line-height: 1.7;
}

.article-content h2,
.article-content h3,
.article-content h4 {
  color: #1a1a2e;
  margin: 28px 0 12px;
  line-height: 1.35;
}

.article-content h2 { font-size: 26px; }
.article-content h3 { font-size: 22px; }
.article-content h4 { font-size: 19px; }