/* ==========================================================================
   Site styles — txcertco.com
   Version: v1.0.0
   Created: 23 October 2026

   Deploy path: /sites/txcertco-com/public/css/site.css

   Loaded last, after /shared/css/base.css. Colour, spacing and type come
   from tokens.css; this file holds only the layout that is specific to this
   one-page site: header, hero, service cards, photo strip, certifications,
   contact form and footer. No !important anywhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--header-bg);
  border-block-end: var(--border-width-hairline) solid var(--header-border);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--header-padding-block);
}

.site-logo {
  display: block;
  flex-shrink: 0;
}

.site-logo img {
  height: var(--header-logo-height);
  width: auto;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--nav-item-gap);
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target-min);
  font-family: var(--nav-font);
  font-size: var(--nav-font-size);
  font-weight: var(--nav-font-weight);
  letter-spacing: var(--nav-tracking);
  color: var(--nav-text);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a:visited:hover {
  color: var(--nav-text-hover);
}

.site-nav a:visited {
  color: var(--nav-text);
}

/* The phone number is the one nav item that stays on a phone; the section
   links drop below 768px because the page is short and scrolls anyway. */
.site-nav .nav-phone {
  padding-inline: var(--space-sm);
  border: var(--border-width-hairline) solid var(--color-brand-500);
  border-radius: var(--radius-sm);
  color: var(--color-brand-500);
}

.site-nav .nav-phone:visited {
  color: var(--color-brand-500);
}

.site-nav .nav-phone:hover {
  color: var(--color-neutral-950);
  background-color: var(--color-brand-500);
}

@media (max-width: 767.98px) {
  .site-nav .nav-section {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  color: var(--color-text-inverse);
  background-color: var(--color-surface-inverse);
  padding-block: var(--space-section-loose) var(--space-section);
}

.hero h1 {
  color: var(--color-neutral-0);
  font-size: var(--step-5);
  font-weight: var(--weight-heading);
}

.hero h1 .accent {
  color: var(--color-brand-500);
}

.hero .eyebrow {
  color: var(--color-brand-500);
}

.hero .lead {
  color: var(--color-neutral-200);
}

.hero p:not(.eyebrow):not(.lead) {
  color: var(--color-neutral-400);
}

.hero .btn-secondary {
  color: var(--color-neutral-0);
  border-color: var(--color-neutral-500);
}

.hero .btn-secondary:visited {
  color: var(--color-neutral-0);
}

.hero .btn-secondary:hover,
.hero .btn-secondary:visited:hover {
  color: var(--color-neutral-950);
  background-color: var(--color-neutral-0);
  border-color: var(--color-neutral-0);
}

.hero-media {
  border-radius: var(--media-radius);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--color-border-inverse);
}

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */

.section-head {
  margin-block-end: var(--space-xl);
}

.section-head .eyebrow {
  color: var(--color-brand-700);
}

.section-head h2 {
  font-weight: var(--weight-heading);
}

.section-alt {
  background-color: var(--color-surface-alt);
}

/* --------------------------------------------------------------------------
   Service cards
   -------------------------------------------------------------------------- */

.service-card {
  height: 100%;
  padding: var(--card-padding);
  background-color: var(--card-bg);
  border: var(--border-width-hairline) solid var(--card-border);
  border-block-start: var(--border-width-heavy) solid var(--color-brand-500);
  border-radius: var(--card-radius);
}

.service-card .service-num {
  display: block;
  margin-block-end: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  color: var(--color-brand-700);
}

.service-card h3 {
  font-size: var(--step-1);
  font-weight: var(--weight-heading);
  margin-block-end: var(--space-2xs);
}

.service-card p {
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Photo strip — replaces the Duda slider, which carried placeholder
   captions. Two across on a phone, four across from 1024px.
   -------------------------------------------------------------------------- */

.photo-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

@media (min-width: 1024px) {
  .photo-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Certifications
   -------------------------------------------------------------------------- */

.badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
}

.badge-row img {
  width: auto;
  height: 120px;
}

@media (min-width: 768px) {
  .badge-row {
    justify-content: center;
  }

  .badge-row img {
    height: 140px;
  }
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-details {
  display: grid;
  gap: var(--space-md);
}

.contact-details dt {
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.contact-details dd {
  margin: 0;
  font-size: var(--step-1);
  font-weight: var(--weight-semibold);
}

.contact-details a {
  text-decoration: none;
}

.contact-details a:hover {
  text-decoration: underline;
}

.contact-card {
  padding: var(--space-lg) var(--space-md);
  background-color: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--card-radius);
}

@media (min-width: 768px) {
  .contact-card {
    padding: var(--space-xl) var(--space-lg);
  }
}

.field {
  display: grid;
  gap: var(--space-3xs);
}

.field + .field {
  margin-block-start: var(--space-md);
}

.field label {
  font-size: var(--field-label-size);
  font-weight: var(--field-label-weight);
}

.field .req {
  color: var(--field-required-mark);
}

.field .opt {
  font-weight: var(--weight-regular);
  color: var(--field-help-text);
}

.field input,
.field textarea {
  width: 100%;
  min-height: var(--field-min-height);
  padding: var(--field-padding-block) var(--field-padding-inline);
  font-size: var(--field-font-size);
  color: var(--field-text);
  background-color: var(--field-bg);
  border: var(--border-width-hairline) solid var(--field-border);
  border-radius: var(--field-radius);
}

.field textarea {
  resize: vertical;
  line-height: var(--leading-normal);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--field-placeholder);
}

.field input:hover,
.field textarea:hover {
  border-color: var(--field-border-hover);
}

.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--field-border-focus);
}

.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'] {
  border-color: var(--field-border-error);
}

/* Honeypot. Off-screen for people, still in the DOM for bots. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  margin-block-start: var(--space-lg);
}

.form-status {
  margin-block-start: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
}

.form-status[hidden] {
  display: none;
}

.form-status.is-error {
  color: var(--color-error-800);
  background-color: var(--color-error-100);
  border: var(--border-width-hairline) solid var(--color-error-600);
}

.form-done[hidden] {
  display: none;
}

.form-done h3 {
  font-size: var(--step-2);
  font-weight: var(--weight-heading);
}

.form-done p {
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: var(--footer-padding-block) var(--space-lg);
  font-size: var(--footer-font-size);
  color: var(--footer-text);
  background-color: var(--footer-bg);
}

.site-footer .footer-logo img {
  height: 3rem;
  width: auto;
}

.site-footer a,
.site-footer a:visited {
  color: var(--footer-link);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:visited:hover {
  color: var(--footer-link-hover);
}

.footer-contact {
  display: grid;
  gap: var(--space-2xs);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  border-block-start: var(--border-width-hairline) solid var(--footer-border);
  font-size: var(--step--2);
}

.version-badge {
  font-family: var(--font-mono);
  color: var(--color-neutral-500);
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.not-found {
  min-height: 50vh;
  display: grid;
  align-content: center;
}