/* app/static/css/components/static_page.css */
/* Styles for static content pages using base CSS variables */
/* These styles apply within a container like .static-page-container */

/* Container width/centering is handled by global.css page-specific rules for now */
/* .static-page-container { ... } */

/* Headings within static page content */
.static-page-container h1,
.static-page-container h2,
.static-page-container h3,
.static-page-container h4,
.static-page-container h5,
.static-page-container h6 {
  font-family: var(--font-family-heading);
  color: var(--color-text-primary);
}

.static-page-container h1 {
  font-size: var(--font-size-3xl); /* Use base scale */
  margin-bottom: var(--spacing-lg);
  border-bottom: var(--border-width-default) solid var(--color-border);
  padding-bottom: var(--spacing-sm);
}

.static-page-container h2 {
  font-size: var(--font-size-2xl); /* Use base scale */
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

.static-page-container h3 {
  font-size: var(--font-size-xl); /* Use base scale */
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-xs);
}

/* Paragraphs */
.static-page-container p {
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base); /* Use base line height */
  margin-bottom: var(--spacing-md);
  color: var(--color-text-primary);
}

/* Links within static content */
.static-page-container a {
  color: var(--color-link);
  text-decoration: underline;
}
.static-page-container a:hover {
  color: var(--color-link-hover);
  text-decoration: none;
}

/* Lists within static content */
.static-page-container ul,
.static-page-container ol {
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-lg);
  font-family: var(--font-family-base);
  color: var(--color-text-primary);
}
.static-page-container li {
  margin-bottom: var(--spacing-xs);
}

/* Basic Contact Form Styles */
.contact-form {
  margin-top: var(--spacing-lg);
  border: var(--border-width-default) solid var(--color-border);
  padding: var(--spacing-lg); /* More padding for form */
  border-radius: var(--border-radius-lg); /* Larger radius for form */
  background-color: var(--color-surface-2); /* Use distinct surface */
}

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.form-input,
.form-textarea {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-sm); /* Adjusted padding */
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--border-radius-md); /* Use standard radius */
  font-size: var(--font-size-md);
  font-family: var(--font-family-base);
  background-color: var(--color-background); /* Use page background */
  color: var(--color-text-primary);
  box-sizing: border-box;
  transition:
    border-color var(--transition-duration-default) ease,
    box-shadow var(--transition-duration-default) ease;
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary); /* Use primary color */
  /* Optional focus ring using primary color */
  /* box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent); */
}

.form-button {
  /* Use button variables */
  display: inline-block;
  padding: var(--button-padding-y) var(--button-padding-x);
  background-color: var(--button-primary-background);
  color: var(--button-primary-color);
  border: var(--button-border-width) solid var(--button-primary-border-color);
  border-radius: var(--button-border-radius);
  font-size: var(--button-font-size);
  font-family: var(--button-font-family);
  font-weight: var(--font-weight-bold);
  line-height: var(--button-line-height);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  user-select: none;
  transition: var(--button-transition);
}

.form-button:hover {
  background-color: var(--button-primary-background-hover);
  border-color: var(--button-primary-border-color-hover);
  color: var(--button-primary-color); /* Ensure text color remains */
}