/* Section framing to match page rhythm */
.section { margin: 2.5rem 0; }
.section-title {
  color: #0b65d6;           /* same blue as other section headings */
  font-size: 1.6rem;
  font-weight: 800;
  text-align: center;
  margin: 0 0 .75rem;
  border-bottom: 3px solid #0b65d6;
  padding-bottom: .25rem;
}
.section-subtitle {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 1.25rem;
  color: #555;
}

/* Card surface – reuse feel of CA blocks */
.card {
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  padding: 1.25rem;
}

/* Form layout consistent with homepage spacing */
.form { max-width: 960px; margin: 0 auto; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
}
.form-row { display: grid; gap: .4rem; }
.form-row-full { grid-column: 1 / -1; }
.align-end { align-items: end; }

.form label { font-weight: 600; color: #222; }
.form select,
.form input[type="file"] {
  padding: .5rem .6rem;
  border: 1px solid #d7d7d7;
  border-radius: 10px;
  background: #fafafa;
  font: inherit;
}
.form .checkbox { display: inline-flex; gap: .5rem; align-items: center; }
.form .hint { color: #6c6c6c; }

/* Keep your existing .button + .purpose styles; just center them here */
.button-container { display: flex; justify-content: center; margin-top: 1rem; }

@media (max-width: 820px) {
  .form-grid { grid-template-columns: 1fr; }
}


body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    text-align: center;
}
.container {
    max-width: 1200px; /* Try 1000px to 1400px as needed */
    margin: 0 auto;
    padding: 1rem;
    box-sizing: border-box;
}
h1 {
    color: #007BFF;
}
h2 {
    color: #007BFF;
    border-bottom: 2px solid #007BFF;
    padding-bottom: 5px;
    margin-bottom: 15px;
}
.chain-h2 {
    color: purple;
    border-bottom: 2px solid purple;
    padding-bottom: 5px;
    margin-bottom: 15px;
}
.button-group {
    display: flex;
    justify-content: center; /* Center buttons */
    gap: 10px; /* Spacing between buttons */
    margin-bottom: 10px; /* Space between rows */
}
.button-container {
    display: flex;
    justify-content: space-between; /* equal spacing */
    flex-wrap: wrap;
    align-items: flex-start; /* Align buttons to the left */
    gap: 10px; /* Adds space between buttons */
}
.ca-section {
  border: 1px solid #ccc;
  padding: 1rem;
  margin-bottom: 1rem;
  background: #fafafa;
}

.ca-heading {
  margin-top: 0;
  color: #5a5cd7;
}

.ca-desc {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 0.8rem;
}

.action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.action-group .button {
  flex: 1 1 45%;
  text-align: center;
}

.chain-section {
    margin-bottom: 20px;
    text-align: left;
}
.button {
    display: inline-block; /* Makes buttons stack */
    width: fit-content; /* Ensures buttons fit their content */
    padding: 12px 20px;
    font-size: 16px;
    color: #fff;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s ease-in-out;
    text-align: center;
    min-width: 180px;
}
.purpose {
    color: black;
    background-color: darksalmon;
}
.purpose:hover {
    background-color: indianred;
}
.chain {
    color: black;
    background-color: darksalmon;
}
.chain:hover {
    background-color: indianred;
}
.button:hover {
    background-color: #0056b3;
}
.nav {
    background: #007BFF;
    padding: 10px 0;
    text-align: center;
}
.nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    font-size: 18px;
}
.nav a:hover {
    text-decoration: underline;
}
/* Unique colors for distinction */
.cert-button {
    background-color: #ff0019;
}
.cert:hover {
    background-color: #0056b3;
}

.crl-button {
    background-color: #6a00ff;
}
.crl-button:hover {
    background-color: #0056b3;
}

.divider{
    top: 200%;
}

.chains-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around; /* or center */
    flex-wrap: wrap; /* optional for smaller screens */
    gap: 20px;
    margin-top: 1rem;
}
.chain-wrapper {
    flex: 1 1 30%;
    min-width: 280px; /* Prevents wrapping too soon */
    max-width: 360px;
    margin: 0.5rem;
    box-sizing: border-box;
    border: 1px solid #ddd;
    padding: 1rem;
    background-color: #f9f9f9;
}