/*
 * ITPlatform Tools — HTTP Security Header Builder
 * Tool-specific CSS overrides — minimal
 * Base framework: ../../_framework/base.css
 *
 * Only styles NOT covered by base.css are defined here.
 */


/* ── HSTS collapsible options ──────────────────────────────────── */

/*
 * .hsts-options is toggled via the `hidden` attribute by JS.
 * We add a subtle visual indent to suggest it belongs to the
 * HSTS toggle above it.
 */
#hsts-options {
  margin-top: var(--space-md);
  padding-left: var(--space-base);
  border-left: 3px solid var(--color-border-light);
}

#hsts-options .field-group:last-child {
  margin-bottom: 0;
}


/* ── Checkbox group — horizontal layout for HSTS options ───────── */

.checkbox-group-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
}


/* ── HSTS toggle — top-level checkbox with emphasis ────────────── */

.hsts-toggle-label {
  font-weight: 500;
}


/* ── Result section — override white-space for readable output ─── */
/*
 * base.css sets .tool-result to white-space: pre-wrap + monospace.
 * That is exactly what we want here: one header per line, preserved.
 * No override needed — base.css default is correct for this tool.
 */


/* ── Notice area ────────────────────────────────────────────────── */

#info-notice {
  margin-bottom: var(--space-base);
}

#info-notice .alert {
  margin-bottom: var(--space-sm);
}

#info-notice .alert:last-child {
  margin-bottom: 0;
}


/* ── Action buttons row ─────────────────────────────────────────── */

.actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  margin-top: var(--space-lg);
}


/* ── Copy button — disable state ───────────────────────────────── */

.copy-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .checkbox-group-inline {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .actions-row {
    flex-direction: column;
    align-items: stretch;
  }

  .actions-row .tool-button,
  .actions-row .copy-button {
    width: 100%;
    justify-content: center;
  }
}