/* Reusable foundations for theme pages and future content templates. */
.abs-container {
    width: min(100% - var(--abs-container-gutter), var(--abs-container));
    margin-inline: auto;
}

/* Simple responsive layouts for reusable card and content groups. */
.abs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--abs-space-6);
}

.abs-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.abs-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.abs-section {
    padding-block: clamp(var(--abs-space-12), 6vw, var(--abs-space-20));
}

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

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

.abs-section--brand {
    background-color: var(--abs-primary);
    color: var(--abs-on-primary);
}

.abs-section--brand .abs-eyebrow,
.abs-section--brand .abs-section__eyebrow,
.abs-section--brand .abs-section-heading,
.abs-section--brand .abs-section__heading,
.abs-section--brand .abs-section__subtitle,
.abs-section--brand .abs-section-description {
    color: var(--abs-on-primary);
}

.abs-section__header {
    max-width: 48rem;
    margin-block-end: var(--abs-space-8);
}

.abs-section__header--center {
    margin-inline: auto;
    text-align: center;
}

.abs-eyebrow,
.abs-section__eyebrow {
    display: inline-block;
    margin: 0 0 var(--abs-space-3);
    color: var(--abs-primary);
    font-size: var(--abs-font-size-sm);
    font-weight: var(--abs-font-weight-semibold);
    line-height: var(--abs-line-height-compact);
}

.abs-section-heading,
.abs-section__heading {
    margin: 0;
    color: var(--abs-text);
    font-size: var(--abs-font-size-3xl);
    font-weight: var(--abs-font-weight-bold);
    line-height: var(--abs-line-height-heading);
}

.abs-section__subtitle {
    margin: var(--abs-space-3) 0 0;
    color: var(--abs-text);
    font-size: var(--abs-font-size-xl);
    font-weight: var(--abs-font-weight-semibold);
    line-height: var(--abs-line-height-heading);
}

.abs-section-description {
    max-width: 46rem;
    margin: var(--abs-space-4) 0 0;
    color: var(--abs-text-muted);
    font-size: var(--abs-font-size-lg);
    line-height: var(--abs-line-height-body);
}

.abs-section__header--center .abs-section-description {
    margin-inline: auto;
}

.abs-section--brand .abs-section-description {
    opacity: 0.9;
}

.abs-main .abs-section--brand a:not(.abs-cta):not(.abs-button) {
    color: var(--abs-on-primary);
}

.abs-main .abs-section--brand a:not(.abs-cta):not(.abs-button):hover {
    color: var(--abs-on-primary);
    opacity: 0.82;
}

.abs-button,
.abs-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--abs-space-2);
    min-height: var(--abs-action-height);
    padding: var(--abs-action-padding-block) var(--abs-action-padding-inline);
    border: 1px solid transparent;
    border-radius: var(--abs-radius-sm);
    font: inherit;
    font-size: var(--abs-font-size-action);
    font-weight: var(--abs-font-weight-semibold);
    line-height: var(--abs-line-height-compact);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--abs-transition), border-color var(--abs-transition), color var(--abs-transition), box-shadow var(--abs-transition), transform var(--abs-transition);
}

.abs-button--primary,
.abs-cta {
    background: var(--abs-primary);
    color: var(--abs-on-primary);
}

.abs-button--primary:hover,
.abs-cta:hover {
    background: var(--abs-primary-hover);
    color: var(--abs-on-primary);
    transform: translateY(-1px);
    box-shadow: var(--abs-shadow-primary);
}

.abs-button--secondary {
    border-color: var(--abs-border);
    background: var(--abs-surface);
    color: var(--abs-primary);
}

.abs-button--secondary:hover {
    border-color: var(--abs-primary);
    background: var(--abs-surface-soft);
}

.abs-button:disabled,
.abs-button[aria-disabled="true"] {
    opacity: var(--abs-disabled-opacity);
    cursor: not-allowed;
}

.abs-link {
    color: var(--abs-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-skip-ink: auto;
    transition: color var(--abs-transition-fast);
}

.abs-link:hover {
    color: var(--abs-primary-hover);
}

.abs-card {
    padding: var(--abs-space-6);
    border: 1px solid var(--abs-border);
    border-radius: var(--abs-radius-md);
    background: var(--abs-surface);
    color: var(--abs-text);
    box-shadow: var(--abs-shadow);
}

.abs-card--interactive {
    transition: border-color var(--abs-transition), box-shadow var(--abs-transition), transform var(--abs-transition);
}

.abs-card--interactive:hover,
.abs-card--interactive:focus-within {
    border-color: var(--abs-primary);
    box-shadow: var(--abs-shadow-primary);
    transform: translateY(-2px);
}

.abs-card--service {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
}

.abs-card__icon {
    display: inline-grid;
    width: 3rem;
    height: 3rem;
    margin-block-end: var(--abs-space-5);
    place-items: center;
    border-radius: var(--abs-radius-sm);
    background: var(--abs-surface-soft);
    color: var(--abs-primary);
}

.abs-card__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.abs-card__title {
    margin: 0;
    color: var(--abs-text);
    font-size: var(--abs-font-size-xl);
    font-weight: var(--abs-font-weight-semibold);
    line-height: var(--abs-line-height-heading);
}

.abs-card__description {
    margin: var(--abs-space-3) 0 0;
    color: var(--abs-text-muted);
    font-size: var(--abs-font-size-base);
    line-height: var(--abs-line-height-body);
}

.abs-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--abs-space-2);
    margin-block-start: auto;
    padding-block-start: var(--abs-space-5);
    color: var(--abs-link);
    font-weight: var(--abs-font-weight-semibold);
    text-decoration: none;
}

.abs-card__link:hover {
    color: var(--abs-primary-hover);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.abs-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--abs-space-1);
    min-height: 1.75rem;
    padding: 0.2rem var(--abs-space-3);
    border: 1px solid var(--abs-border);
    border-radius: var(--abs-radius-pill);
    background: var(--abs-surface-soft);
    color: var(--abs-text-muted);
    font-size: var(--abs-font-size-xs);
    font-weight: var(--abs-font-weight-medium);
    line-height: var(--abs-line-height-compact);
}

.abs-badge--success {
    border-color: transparent;
    background: var(--abs-status-success-bg);
    color: var(--abs-status-success);
}

.abs-badge--warning {
    border-color: transparent;
    background: var(--abs-status-warning-bg);
    color: var(--abs-status-warning);
}

.abs-badge--danger {
    border-color: transparent;
    background: var(--abs-status-danger-bg);
    color: var(--abs-status-danger);
}

.abs-form-control {
    display: block;
    width: 100%;
    min-height: var(--abs-control-height);
    padding: var(--abs-space-3) var(--abs-space-4);
    border: 1px solid var(--abs-border);
    border-radius: var(--abs-radius-sm);
    background: var(--abs-surface);
    color: var(--abs-text);
    font: inherit;
    font-size: var(--abs-font-size-base);
    line-height: var(--abs-line-height-compact);
    transition: border-color var(--abs-transition-fast), box-shadow var(--abs-transition-fast), background-color var(--abs-transition-fast);
}

.abs-form-group {
    display: grid;
    gap: var(--abs-space-2);
}

.abs-field-label {
    color: var(--abs-text);
    font-size: var(--abs-font-size-sm);
    font-weight: var(--abs-font-weight-semibold);
}

.abs-form-control:focus-visible {
    border-color: var(--abs-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--abs-primary) 18%, transparent);
}

textarea.abs-form-control {
    min-height: 8rem;
    resize: vertical;
}

.abs-form-control::placeholder {
    color: var(--abs-text-muted);
    opacity: 0.82;
}

.abs-form-control[aria-invalid="true"] {
    border-color: var(--abs-status-danger);
}

.abs-form-control:disabled,
.abs-form-control[readonly] {
    background: var(--abs-surface-soft);
    color: var(--abs-text-muted);
    cursor: not-allowed;
}

.abs-field-hint,
.abs-field-error {
    margin: var(--abs-space-2) 0 0;
    font-size: var(--abs-font-size-sm);
    line-height: var(--abs-line-height-compact);
}

.abs-field-hint {
    color: var(--abs-text-muted);
}

.abs-field-error {
    color: var(--abs-status-danger);
    font-weight: var(--abs-font-weight-medium);
}

@media (max-width: 900px) {
    .abs-grid,
    .abs-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    :root {
        --abs-container-gutter: 1.75rem;
    }

    .abs-section {
        padding-block: var(--abs-space-12);
    }

    .abs-card {
        padding: var(--abs-space-5);
    }

    .abs-grid,
    .abs-grid--2,
    .abs-grid--4 {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--abs-space-5);
    }

    .abs-section__header {
        margin-block-end: var(--abs-space-6);
    }

    .abs-section__subtitle {
        font-size: var(--abs-font-size-lg);
    }
}