/* Shared remediation layer for legacy Razor and Bootstrap surfaces.
   Page-specific styles stay in ip-pages.css. Accessibility overrides load after this file. */

body {
    color: var(--ip-color-neutral-900);
    background: var(--ip-color-neutral-25);
    font-family: var(--ip-font-sans);
    line-height: var(--ip-line-height-normal);
}

.ip-page__main {
    container-type: inline-size;
}

.ip-page__main :where(h1, h2, h3, h4) {
    color: var(--ip-color-neutral-900);
    font-weight: var(--ip-font-weight-semibold);
    letter-spacing: var(--ip-letter-spacing-tight);
    text-wrap: balance;
}

.ip-page__main :where(p, li, dd) {
    text-wrap: pretty;
}

.ip-page__main :where(.lead, .text-muted) {
    color: var(--ip-color-neutral-600) !important;
}

/* Bootstrap compatibility while older pages move to ip-* components. */
.ip-page__main :where(.form-control, .form-select) {
    min-height: 44px;
    border: 1.5px solid var(--ip-color-neutral-300);
    border-radius: var(--ip-radius-md);
    color: var(--ip-color-neutral-900);
    background-color: var(--ip-color-neutral-0);
    font: inherit;
}

.ip-page__main textarea.form-control {
    min-height: 7rem;
    resize: vertical;
}

.ip-page__main :where(.form-control, .form-select):hover {
    border-color: var(--ip-color-neutral-400);
}

.ip-page__main :where(.form-control, .form-select):focus {
    border-color: var(--ip-color-primary);
    box-shadow: var(--ip-focus-ring);
}

.ip-page__main :where(.form-label, label:not(.form-check-label)) {
    margin-bottom: var(--ip-space-2);
    color: var(--ip-color-neutral-700);
    font-weight: var(--ip-font-weight-medium);
}

.ip-page__main :where(.btn) {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-width: 2px;
    border-radius: var(--ip-radius-md);
    padding-inline: var(--ip-space-4);
    font-weight: var(--ip-font-weight-medium);
    line-height: 1.2;
    text-decoration: none;
    transition: background-color var(--ip-transition-fast) var(--ip-easing-default),
                border-color var(--ip-transition-fast) var(--ip-easing-default),
                color var(--ip-transition-fast) var(--ip-easing-default),
                box-shadow var(--ip-transition-fast) var(--ip-easing-default),
                transform var(--ip-transition-fast) var(--ip-easing-default);
}

.ip-page__main :where(.btn):active {
    transform: translateY(1px);
}

.ip-page__main :where(.btn):focus-visible {
    outline: 3px solid var(--ip-color-accent);
    outline-offset: 2px;
    box-shadow: none;
}

.ip-page__main :where(.btn-sm) {
    min-height: 36px;
}

.ip-page__main :where(.card) {
    border-color: var(--ip-color-neutral-200);
    border-radius: var(--ip-radius-lg);
    color: var(--ip-color-neutral-900);
    background-color: var(--ip-color-neutral-0);
    box-shadow: var(--ip-shadow-xs);
}

.ip-page__main :where(.card-header, .card-footer) {
    border-color: var(--ip-color-neutral-200);
    background-color: var(--ip-color-neutral-50);
}

.ip-page__main :where(.alert) {
    border-width: 1px;
    border-radius: var(--ip-radius-md);
}

.ip-page__main :where(.table-responsive, .ip-table-wrapper) {
    border: 1px solid var(--ip-color-neutral-200);
    border-radius: var(--ip-radius-lg);
    background: var(--ip-color-neutral-0);
    box-shadow: var(--ip-shadow-xs);
}

.ip-page__main :where(.table) {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ip-color-neutral-800);
    --bs-table-border-color: var(--ip-color-neutral-200);
    margin-bottom: 0;
    vertical-align: middle;
}

.ip-page__main :where(.table th) {
    color: var(--ip-color-neutral-700);
    background: var(--ip-color-neutral-50);
    font-size: var(--ip-font-size-sm);
    font-weight: var(--ip-font-weight-semibold);
    letter-spacing: 0.01em;
}

.ip-page__main :where(.table td, .table th) {
    padding: var(--ip-space-3) var(--ip-space-4);
}

.ip-page__main :where(.pagination) {
    gap: var(--ip-space-1);
}

.ip-page__main :where(.page-link) {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ip-radius-md);
    color: var(--ip-color-primary);
    background: var(--ip-color-neutral-0);
}

.ip-page__main :where(fieldset) {
    min-width: 0;
}

.ip-page__main :where(legend) {
    margin-bottom: var(--ip-space-4);
    font-size: var(--ip-font-size-lg);
    font-weight: var(--ip-font-weight-semibold);
}

/* Account flows stay narrow enough to scan without constraining order history. */
body[data-ui-area="account"] .ip-page__main > :where(form, .ip-auth-card, .ip-profile-card) {
    max-width: 46rem;
}

/* Route-family composition. The data attribute is emitted for every routable
   Razor page, including culture-prefixed URLs. */
body[data-ui-section="contents"] .ip-page__main :where(.ip-article, article),
body[data-ui-section="info"] .ip-page__main :where(.ip-policy-content, article) {
    max-inline-size: 78ch;
}

body[data-ui-section="contents"] .ip-page__main :where(.ip-post-card__summary, .ip-article__content),
body[data-ui-section="info"] .ip-page__main :where(p, li) {
    line-height: var(--ip-line-height-relaxed);
}

body[data-ui-section="clients"] .ip-page__main > :where(form, .ip-cart, .ip-checkout),
body[data-ui-section="users"] .ip-page__main > :where(form, .ip-order, .ip-invoice),
body[data-ui-section="data"] .ip-page__main > :where(form, section) {
    max-inline-size: 64rem;
}

body[data-ui-section="account"] .ip-page__main > :where(form, section) {
    max-inline-size: 46rem;
}

body[data-ui-section="files"] .ip-page__main :where(.table-responsive, .ip-table-wrapper),
body[data-ui-section="lang"] .ip-page__main :where(.table-responsive, .ip-table-wrapper) {
    overflow-x: auto;
}

body[data-ui-section="acf-deliverable"] .ip-page__main {
    max-inline-size: 72rem;
}

body[data-ui-section="acf-deliverable"] .ip-page__main :where(code, samp) {
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

/* Admin and ACF share a denser, wide product workspace. */
body[data-ui-area="admin"] {
    --ip-container-max: 1440px;
}

body[data-ui-area="admin"] .ip-page__main {
    padding-top: var(--ip-space-5);
}

body[data-ui-area="admin"] .ip-page__main > h1,
body[data-ui-area="admin"] .ip-page__main > header > h1 {
    margin-bottom: var(--ip-space-4);
    font-size: clamp(var(--ip-font-size-xl), 1.8vw, var(--ip-font-size-3xl));
}

body[data-ui-area="admin"] .ip-page__main :where(.table td, .table th) {
    padding: var(--ip-space-2) var(--ip-space-3);
    font-size: var(--ip-font-size-sm);
}

body[data-ui-section^="admin-"] .ip-page__main :where(.table-responsive, .ip-table-wrapper) {
    overflow-x: auto;
}

body[data-ui-section="admin-acf"] .ip-page__main :where(code, samp),
body[data-ui-section="admin-information"] .ip-page__main :where(code, samp) {
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

body[data-ui-section="seo"] .ip-page__main,
body[data-ui-section="error"] .ip-page__main {
    max-inline-size: 72rem;
}

@container (max-width: 42rem) {
    .ip-page__main :where(.btn:not(.btn-sm), .ip-btn:not(.ip-btn--sm)) {
        max-width: 100%;
        white-space: normal;
    }

    .ip-page__main :where(.table td, .table th) {
        padding: var(--ip-space-2);
        overflow-wrap: anywhere;
    }
}

@media (forced-colors: active) {
    .ip-page__main :where(.card, .table-responsive, .ip-table-wrapper, .form-control, .form-select) {
        border: 1px solid CanvasText;
        box-shadow: none;
    }
}

@media print {
    body {
        background: #fff;
    }

    .ip-page__main :where(.card, .table-responsive, .ip-table-wrapper) {
        box-shadow: none;
    }
}