/*
   ATI / Access to Info — content/article page polish
   Loaded site-wide via ~/bundles/ati-modern (BundleConfig.vb), after the Porto
   theme so its declarations win the cascade. Everything is scoped to the
   .ati-doc wrapper so it only affects pages that opt in (e.g. PAIAManualTemplate).

   Purpose: bring the Bootstrap/Porto "blue blocks" (accordion headers, sidebar
   card headers, the CTA band, FAQ toggles, comparison table) in line with the
   home.css design language — gradients, layered tinted shadows, radius tokens
   and the Poppins display face — instead of flat, saturated solid-blue fills.

   Design tokens (--color-*, --space-*, --radius-*, --shadow-*, --ease-*,
   --font-*) are defined on :root in Content/home.css, which loads in the same
   bundle.
*/

/* Headings on these pages → Poppins, for parity with the home page */
.ati-doc h1,
.ati-doc .content-body h2,
.ati-doc .content-body h3,
.ati-doc .content-body h4 { font-family: var(--font-display); letter-spacing: -0.01em; }

/* Page header — a soft brand wash instead of plain white */
.ati-doc .page-header-classic {
    background: linear-gradient(180deg, var(--color-primary-tint), #fff);
    border-bottom: 1px solid var(--color-line);
}

/* ---- Accordion: clean white cards, soft pill badge, readable titles ---- */
.ati-doc #templateSections .card {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    margin-bottom: var(--space-3);
    background: #fff;
}
.ati-doc #templateSections .card-header { background: #fff !important; border: 0; padding: 0; }
.ati-doc #templateSections .card-header h3 { margin: 0; }
.ati-doc #templateSections .btn-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-5) var(--space-6);
    background: transparent;
    border: 0;
    text-decoration: none;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16.5px;
    line-height: 1.35;
    text-align: left;
    transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.ati-doc #templateSections .btn-link:hover { background: var(--color-primary-tint); color: var(--color-primary-3); }
.ati-doc #templateSections .card:has(.btn-link:not(.collapsed)) {
    border-color: var(--color-primary-soft);
    box-shadow: var(--shadow-2);
}
.ati-doc #templateSections .btn-link:not(.collapsed) { background: linear-gradient(180deg, var(--color-primary-tint), #fff); }
.ati-doc #templateSections .btn-link:not(.collapsed)::after { border-color: var(--color-primary); }
.ati-doc #templateSections .btn-link::after {
    content: "";
    margin-left: auto;
    margin-top: -3px;
    width: 9px; height: 9px;
    border-right: 2px solid var(--color-subtle);
    border-bottom: 2px solid var(--color-subtle);
    transform: rotate(45deg);
    transition: transform 0.3s var(--ease-spring);
    flex-shrink: 0;
}
.ati-doc #templateSections .btn-link:not(.collapsed)::after { transform: rotate(-135deg); margin-top: 3px; }
.ati-doc #templateSections .badge-primary {
    background: var(--color-primary-soft) !important;
    color: var(--color-primary-3) !important;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.02em;
    border-radius: var(--radius-pill);
    padding: 5px 12px;
}
.ati-doc #templateSections .card-body { padding: var(--space-2) var(--space-6) var(--space-6); color: var(--color-muted); }
.ati-doc #templateSections .card-body ul { margin-bottom: 0; }
.ati-doc #templateSections .card-body li { margin-bottom: var(--space-2); }

/* ---- Sidebar cards ---- */
.ati-doc .sidebar .card {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-2);
    overflow: hidden;
}
.ati-doc .sidebar .card-header { padding: var(--space-5) var(--space-6); border: 0; }
.ati-doc .sidebar .card-header h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16.5px;
    letter-spacing: -0.01em;
}
.ati-doc .sidebar .card-header.bg-primary {
    background: linear-gradient(135deg, var(--color-primary-2), var(--color-primary-3)) !important;
}
.ati-doc .sidebar .card-header.bg-secondary {
    background: linear-gradient(135deg, #E8746C, #D8473E) !important;
}
.ati-doc .sidebar .card-header.bg-light {
    background: var(--color-canvas) !important;
    color: var(--color-ink);
    border-bottom: 1px solid var(--color-line);
}
.ati-doc .sidebar .card-body { padding: var(--space-6); }
.ati-doc .sidebar .btn-primary {
    background: linear-gradient(135deg, var(--color-primary-2), var(--color-primary-3));
    border: 0;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 700;
    padding: 12px 20px;
    box-shadow: 0 6px 18px rgb(0 136 204 / 0.28);
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-out);
}
.ati-doc .sidebar .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgb(0 136 204 / 0.34); }
.ati-doc .sidebar .list-group-item-action {
    padding: 10px 0 !important;
    color: var(--color-text);
    font-weight: 600;
    font-size: 14.5px;
    transition: color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.ati-doc .sidebar .list-group-item-action:hover { color: var(--color-primary); transform: translateX(3px); background: transparent; }

/* ---- Big CTA band ---- */
.ati-doc .content-body .bg-primary {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-4) !important;
    padding: var(--space-8) !important;
    background:
        radial-gradient(600px 400px at 12% 0%, rgb(43 170 177 / 0.22), transparent 60%),
        radial-gradient(600px 420px at 100% 110%, rgb(0 153 230 / 0.28), transparent 60%),
        linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-3) 100%) !important;
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.12) inset, 0 18px 44px rgb(0 119 179 / 0.28);
}
.ati-doc .content-body .bg-primary::after {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
    mix-blend-mode: overlay; opacity: 0.4; pointer-events: none;
}
.ati-doc .content-body .bg-primary > * { position: relative; }
.ati-doc .content-body .bg-primary h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 28px);
    letter-spacing: -0.02em;
    text-transform: none;
    color: #fff;
}
.ati-doc .content-body .bg-primary p { color: rgb(255 255 255 / 0.92); font-size: 16px; line-height: 1.7; }
.ati-doc .content-body .bg-primary .btn { border-radius: var(--radius-pill); font-weight: 700; padding: 12px 22px; }
.ati-doc .content-body .bg-primary .btn-light {
    background: #fff; color: var(--color-primary-3); border: 0;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 14px 30px rgb(0 0 0 / 0.18);
    transition: transform 0.3s var(--ease-spring), color 0.2s var(--ease-out);
}
.ati-doc .content-body .bg-primary .btn-light:hover { transform: translateY(-2px); color: var(--color-primary); }
.ati-doc .content-body .bg-primary .btn-outline-light {
    border: 1.5px solid rgb(255 255 255 / 0.7); color: #fff; background: transparent;
    transition: background-color 0.2s var(--ease-out), transform 0.3s var(--ease-spring);
}
.ati-doc .content-body .bg-primary .btn-outline-light:hover { background: rgb(255 255 255 / 0.14); transform: translateY(-2px); }

/* ---- Comparison table ---- */
.ati-doc .content-body .table-responsive {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-2);
    overflow: hidden;
    box-shadow: var(--shadow-1);
}
.ati-doc .content-body table { margin: 0; }
.ati-doc .content-body table.table-bordered,
.ati-doc .content-body table.table-bordered td,
.ati-doc .content-body table.table-bordered th { border-color: var(--color-line); }
.ati-doc .content-body .thead-dark th {
    background: var(--color-ink) !important;
    color: #fff !important;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
    border-color: rgb(255 255 255 / 0.08) !important;
    padding: 14px 16px;
}
.ati-doc .content-body .table td { padding: 12px 16px; vertical-align: middle; }
.ati-doc .content-body .table-striped tbody tr:nth-of-type(odd) { background: var(--color-primary-tint); }

/* ---- Alerts: consistent rounding ---- */
.ati-doc .content-body .alert { border-radius: var(--radius-2); }

/* ---- FAQ toggles (Porto .toggle-primary) → match the accordion ---- */
.ati-doc .toggle-primary > .toggle {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    margin-bottom: var(--space-3);
    overflow: hidden;
    background: #fff;
}
.ati-doc .toggle-primary > .toggle.active { border-color: var(--color-primary-soft); box-shadow: var(--shadow-2); }
.ati-doc .toggle-primary .toggle > .toggle-title {
    background: #fff;
    border: 0;
    border-radius: 0;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16.5px;
    line-height: 1.35;
    padding: var(--space-5) var(--space-8) var(--space-5) var(--space-6);
    transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.ati-doc .toggle-primary .toggle > .toggle-title:hover { background: var(--color-primary-tint); color: var(--color-primary-3); }
.ati-doc .toggle-primary .toggle.active > .toggle-title {
    background: linear-gradient(180deg, var(--color-primary-tint), #fff);
    color: var(--color-primary-3);
}
.ati-doc .toggle-primary .toggle > .toggle-title:before { border-color: var(--color-subtle); }
.ati-doc .toggle-primary .toggle.active > .toggle-title:before { border-color: var(--color-primary); }
.ati-doc .toggle-primary .toggle > .toggle-content { padding: 0 var(--space-6) var(--space-5); }
.ati-doc .toggle-primary .toggle > .toggle-content > p { color: var(--color-muted); padding: var(--space-2) 0 0; }