/**
 * @file
 * Static page styles — About Us, Shipping, T&C, Privacy, FAQ,
 * Testimonials, and Contact Us.
 *
 * Targets node types: page, faq, testimonials, webform.
 * Uses the node--type-* body/article classes emitted by Drupal.
 */


/* ==========================================================================
   Page title — blue accent bar matching the nav/footer colour language
   ========================================================================== */

.page-node-type-page .page-title,
.page-node-type-faq .page-title,
.page-node-type-testimonials .page-title,
.page-node-type-webform .page-title {
  background-color: var(--td-color-primary);
  color: var(--td-color-white);
  padding: var(--td-space-md) var(--td-space-lg);
  border-radius: var(--td-radius-md);
  box-shadow: var(--td-shadow-sm);
  margin-bottom: var(--td-space-lg);
  font-size: var(--td-font-size-h2);
  line-height: 1.3;
}


/* ==========================================================================
   Prose body — shared across all basic pages (About, Shipping, T&C, Privacy)
   ========================================================================== */

.node--type-page .node__content,
.node--type-webform .node__content {
  line-height: 1.7;
}

.node--type-page .node__content h2 {
  color: var(--td-color-primary);
  font-size: var(--td-font-size-h2);
  border-bottom: 3px solid var(--td-color-primary);
  padding-bottom: var(--td-space-sm);
  margin-top: var(--td-space-xl);
  margin-bottom: var(--td-space-md);
}

.node--type-page .node__content h2:first-child {
  margin-top: 0;
}

.node--type-page .node__content p {
  margin-bottom: var(--td-space-md);
  max-width: 65em;
}

.node--type-page .node__content table {
  width: 100%;
  max-width: 40em;
  border-collapse: collapse;
  margin: var(--td-space-md) 0 var(--td-space-lg);
  font-size: var(--td-font-size-sm);
}

.node--type-page .node__content table th,
.node--type-page .node__content table td {
  padding: var(--td-space-sm) var(--td-space-md);
  text-align: left;
  border-bottom: 1px solid var(--td-color-border-light);
}

.node--type-page .node__content table th {
  background-color: var(--td-color-primary);
  color: var(--td-color-white);
  font-weight: var(--td-font-weight-bold);
  border-bottom-color: var(--td-color-primary-mid);
}

.node--type-page .node__content table tr.even {
  background-color: var(--td-color-bg-muted);
}

.node--type-page .node__content table .price {
  font-weight: var(--td-font-weight-bold);
  color: var(--td-color-primary);
}


/* ==========================================================================
   FAQ — Question / Answer pairs
   ========================================================================== */

.node--type-faq .field--name-field-qa {
  display: flex;
  flex-direction: column;
  gap: var(--td-space-lg);
}

.node--type-faq .paragraph--type--q-a {
  border: 1px solid var(--td-color-border-light);
  border-radius: var(--td-radius-md);
  overflow: hidden;
  box-shadow: var(--td-shadow-sm);
}

.node--type-faq .field--name-field-question {
  background-color: var(--td-color-primary);
  color: var(--td-color-white);
  padding: var(--td-space-md) var(--td-space-lg);
  margin: 0;
}

.node--type-faq .field--name-field-question .field__label {
  display: none;
}

.node--type-faq .field--name-field-question .field__item {
  font-weight: var(--td-font-weight-bold);
  font-size: var(--td-font-size-lg);
  color: var(--td-color-white);
}

.node--type-faq .field--name-field-answer {
  padding: var(--td-space-md) var(--td-space-lg);
  background-color: var(--td-color-bg);
  line-height: 1.7;
}

.node--type-faq .field--name-field-answer .field__label {
  display: none;
}

.node--type-faq .field--name-field-answer .field__item p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   Testimonials — quote card grid
   ========================================================================== */

.node--type-testimonials .field--name-field-testimonial > .field__label {
  display: none;
}

.node--type-testimonials .field--name-field-testimonial > .field__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--td-space-lg);
}

.node--type-testimonials .paragraph--type--testimonial {
  background-color: var(--td-color-bg);
  border: 1px solid var(--td-color-border-light);
  border-left: 4px solid var(--td-color-primary);
  border-radius: var(--td-radius-md);
  padding: var(--td-space-lg);
  box-shadow: var(--td-shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.node--type-testimonials .field--name-field-quote {
  font-style: italic;
  line-height: 1.7;
  color: var(--td-color-text);
  margin-bottom: var(--td-space-md);
}

.node--type-testimonials .field--name-field-quote::before {
  content: "\201C";
  display: block;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--td-color-primary-light);
  margin-bottom: var(--td-space-xs);
}

.node--type-testimonials .field--name-field-name {
  font-weight: var(--td-font-weight-bold);
  color: var(--td-color-primary);
  border-top: 1px solid var(--td-color-border-light);
  padding-top: var(--td-space-sm);
  font-size: var(--td-font-size-sm);
}


/* ==========================================================================
   Contact form — clean inputs matching the site style
   ========================================================================== */

.node--type-webform .webform-submission-form {
  max-width: 40em;
}

.node--type-webform .webform-submission-form label {
  display: block;
  font-weight: var(--td-font-weight-bold);
  color: var(--td-color-primary);
  margin-bottom: var(--td-space-xs);
}

.node--type-webform .webform-submission-form .form-text,
.node--type-webform .webform-submission-form .form-email,
.node--type-webform .webform-submission-form .form-number,
.node--type-webform .webform-submission-form .form-select,
.node--type-webform .webform-submission-form .form-textarea {
  width: 100%;
  padding: var(--td-space-sm) var(--td-space-md);
  border: 1px solid var(--td-color-border);
  border-radius: var(--td-radius-sm);
  font-family: var(--td-font-body);
  font-size: var(--td-font-size-base);
  color: var(--td-color-text);
  background-color: var(--td-color-bg);
  transition: border-color var(--td-transition-duration) var(--td-transition-easing);
}

.node--type-webform .webform-submission-form .form-text:focus,
.node--type-webform .webform-submission-form .form-email:focus,
.node--type-webform .webform-submission-form .form-number:focus,
.node--type-webform .webform-submission-form .form-select:focus,
.node--type-webform .webform-submission-form .form-textarea:focus {
  border-color: var(--td-color-primary-light);
  outline: 2px solid var(--td-color-primary-light);
  outline-offset: 0;
}

.node--type-webform .webform-submission-form .form-textarea {
  min-height: 10em;
  resize: vertical;
}

.node--type-webform .webform-submission-form .description {
  color: var(--td-color-text-muted);
  font-size: var(--td-font-size-sm);
  margin-top: var(--td-space-xs);
}

.node--type-webform .webform-submission-form .form-actions {
  margin-top: var(--td-space-xl);
}


/* ==========================================================================
   Mobile adjustments
   ========================================================================== */

@media (max-width: 575px) {
  .node--type-testimonials .field--name-field-testimonial > .field__items {
    grid-template-columns: 1fr;
  }
}