/* Scoped fix: prevent theme styles from breaking Bootstrap components
   inside the AI content container. Only targets known interference
   points — leaves theme typography/colors alone. */

/* Bootstrap font-size class overrides — em-based so they render at the
   design size on themes that use html{font-size:62.5%} (Knote etc.).
   Bootstrap declares these in rem, which then resolves against a 10px
   root on those themes and shrinks all our headings ~37%. .aic-scope is
   added to every AI hero <header> and content <main>. */
.aic-scope .display-1 { font-size: 5em; }
.aic-scope .display-2 { font-size: 4.5em; }
.aic-scope .display-3 { font-size: 4em; }
.aic-scope .display-4 { font-size: 3.5em; }
.aic-scope .display-5 { font-size: 3em; }
.aic-scope .display-6 { font-size: 2.5em; }

/* Hero H1 specifically — 20% smaller than the .display-2 default and
   tighter line-height. The hero h1 is the only h1 with .display-2 in
   AI content (body content uses plain h1/h2/h3), so we can target by
   class without affecting body typography. */
.aic-scope h1.display-2 {
    font-size: 3.6em;
    line-height: 1.1;
}
@media (max-width: 767.98px) {
    .aic-scope h1.display-2 { font-size: 2.6em; }
}

.aic-scope .fs-1 { font-size: 2.5em; }
.aic-scope .fs-2 { font-size: 2em; }
.aic-scope .fs-3 { font-size: 1.75em; }
.aic-scope .fs-4 { font-size: 1.5em; }
.aic-scope .fs-5 { font-size: 1.25em; }
.aic-scope .fs-6 { font-size: 1em; }

/* Lead paragraph — Bootstrap's 1.25em default reads as a competing
   heading inside an article body where it sits right under an H2.
   Tone down to ~5% over body, lighter color, looser line-height so
   it scans as an intro paragraph rather than a sub-heading. */
.aic-scope .lead {
    font-size: 1.05em;
    font-weight: 400;
    line-height: 1.55;
    color: #495057;
}

.aic-scope h1, .aic-scope .h1 { font-size: 2.5em; }
.aic-scope h2, .aic-scope .h2 { font-size: 2em; }

/* Body section headings render in the publisher's secondary color so
   they read as branded section breaks rather than default-text headers.
   Hero H1 is unaffected (it lives inside the dark hero header with
   text-white). The Key Points h2 has its own color rule (primary) at
   higher specificity so this doesn't change it.
   padding-top gives breathing room above each section heading; the
   renderer also emits .pt-4 on new generations, but this CSS rule
   makes the spacing show up on already-rendered pages without a
   regeneration. Excluded from .key-points-heading which has its own
   tighter spacing inside the callout block. */
.aic-scope h2:not(.key-points-heading) {
    color: var(--aic-secondary, #1f3a5f);
    /* rem (root-relative) so spacing doesn't compound with the h2's
       2em font-size the way em would. !important defeats the
       publisher theme's h2 padding rule (Knote ships one with
       !important; specificity alone loses). Same effective value as
       Bootstrap's pt-4 utility. */
    padding-top: 1.5rem !important;
}

/* H3 sub-headings inside the article body. Same defensive pattern
   as h2 — rem so spacing doesn't compound with the heading's own
   font-size, and !important so it wins against publisher theme
   rules. Slightly less top margin than h2's pt-4 since h3 is a
   sub-section, not a section break. */
.aic-scope h3 {
    margin-top: 1.25rem !important;
    margin-bottom: 0.5rem !important;
}
.aic-scope h3, .aic-scope .h3 { font-size: 1.75em; }
.aic-scope h4, .aic-scope .h4 { font-size: 1.5em; }
.aic-scope h5, .aic-scope .h5 { font-size: 1.25em; }
.aic-scope h6, .aic-scope .h6 { font-size: 1em; }

[class$="-content-page"] *,
[class$="-content-page"] *::before,
[class$="-content-page"] *::after {
    box-sizing: border-box;
}

[class$="-content-page"] .container {
    max-width: 960px;
}

[class$="-content-page"] img {
    max-width: 100%;
    height: auto;
}

[class$="-content-page"] section {
    margin-bottom: 2em;
}

/* Accordion — themes often override colors/backgrounds making text invisible.
   Program-row text rendered ~10px on publisher themes that set
   html{font-size:62.5%} because Bootstrap's .accordion-button{font-size:1rem}
   resolves against the 10px root. Pin to 16px in px units.
   font-size + font-weight + padding need !important not because they
   fight a Bootstrap utility, but because the publisher's theme stylesheet
   may carry its own !important rules on .accordion-button (Knote does);
   selector specificity alone isn't enough when an unknown theme can
   ship !important too. */
[class$="-content-page"] .accordion-button {
    background-color: #fff;
    color: var(--aic-primary, #1f3a5f);
    border: none;
    box-shadow: none;
    outline: none;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.4;
    padding: 14px 18px !important;
    cursor: pointer;
}

/* Open-state stays on the publisher palette: a 10% primary tint
   for the row background so the active row reads as part of the
   brand instead of falling back to Bootstrap's default blue. */
[class$="-content-page"] .accordion-button:not(.collapsed) {
    background-color: var(--aic-primary-10, rgba(31, 58, 95, 0.1));
    color: var(--aic-primary, #1f3a5f);
}

[class$="-content-page"] .accordion-button::after {
    filter: none;
}

[class$="-content-page"] .accordion-item {
    background-color: #fff;
    color: #212529;
    border: 1px solid var(--aic-primary-60, rgba(31, 58, 95, 0.6));
}

[class$="-content-page"] .accordion-body {
    background-color: #fff;
    color: #212529;
}

[class$="-content-page"] .accordion-header {
    color: #212529;
}

/* Tables — themes often strip borders or add custom backgrounds */
[class$="-content-page"] .table {
    border-collapse: collapse;
    width: 100%;
}

[class$="-content-page"] .table th,
[class$="-content-page"] .table td {
    padding: 0.75em;
    vertical-align: top;
    border: 1px solid #dee2e6;
    background-color: transparent;
}

[class$="-content-page"] .table thead th {
    background-color: #f8f9fa;
}

[class$="-content-page"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Cards — themes override border-radius and backgrounds */
[class$="-content-page"] .card {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.375em;
}

[class$="-content-page"] .card-header {
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

/* List groups — theme list resets break these */
[class$="-content-page"] .list-group-item {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
    padding: 0.75em 1.25em;
}

[class$="-content-page"] .list-group-item::before {
    content: none;
}

/* Related articles — visually distinct from surrounding prose. Picks up
   the publisher palette via --aic-primary / --aic-secondary, set inline on
   the page-level <main class="...-content-page"> by the plugin templates.
   Falls back to neutral grays if a publisher hasn't configured a palette. */
[class$="-content-page"] .aic-related-articles {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-left: 4px solid var(--aic-primary, #6c757d);
    border-radius: 0.375em;
    padding: 1em 1.25em;
    margin: 1em 0;
}

[class$="-content-page"] .aic-related-articles .list-group-item {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #dee2e6;
    padding: 0.5em 0;
}

[class$="-content-page"] .aic-related-articles .list-group-item:last-child {
    border-bottom: 0;
}

/* Badges and alerts */
[class$="-content-page"] .badge {
    display: inline-block;
    font-size: 0.75em;
}

[class$="-content-page"] .alert {
    border: 1px solid transparent;
    border-radius: 0.375em;
}

/* Tabs/nav — themes restyle these heavily */
[class$="-content-page"] .nav-tabs .nav-link {
    background-color: transparent;
    border: 1px solid transparent;
}

[class$="-content-page"] .nav-tabs .nav-link.active {
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
}

/* Lists inside content — prevent theme custom bullets */
[class$="-content-page"] li::before {
    content: none;
}

/* Links — default to Bootstrap blue */
[class$="-content-page"] a:not(.btn):not(.nav-link):not(.accordion-button) {
    color: #0d6efd;
}

[class$="-content-page"] a:not(.btn):not(.nav-link):not(.accordion-button):hover {
    color: #0a58ca;
}

/* Buttons — theme button resets break Bootstrap buttons */
[class$="-content-page"] .btn {
    display: inline-block;
    border-radius: 0.375em;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Section dividers (did_you_know rendered as visual breaks)
   ═══════════════════════════════════════════════════════════════════════════ */

.section-divider {
    display: flex;
    align-items: center;
    margin: 2em 0;
}

.section-divider__text {
    text-align: center;
    font-size: .95em;
    color: #6c757d;
    line-height: 1.5;
    margin: .5em auto 0;
    max-width: 600px;
}

/* Yellow accent bar + gray line */
.section-divider--yellow .section-divider__accent {
    height: 4px;
    width: 60px;
    background: #f5b82e;
    border-radius: 2px;
}

.section-divider--yellow .section-divider__line {
    height: 1px;
    flex: 1;
    background: #e9ecef;
}

/* Simple gray rule */
.section-divider--gray .section-divider__bar {
    height: 1px;
    flex: 1;
    background: #dee2e6;
}

/* Icon centered between two lines */
.section-divider--icon .section-divider__line {
    height: 1px;
    flex: 1;
    background: #e9ecef;
}

.section-divider--icon .section-divider__icon {
    margin: 0 .75em;
    font-size: 1.25em;
    color: #f5b82e;
}

/* Hub-of-spokes navigation block */
.hub-links--compact {
    column-count: 2;
    column-gap: 1.5em;
}
@media (min-width: 768px) {
    .hub-links--compact {
        column-count: 4;
    }
}
@media (min-width: 1200px) {
    .hub-links--compact {
        column-count: 5;
    }
}
.hub-links--compact li {
    break-inside: avoid;
}

.hub-link-card {
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease;
}
.hub-link-card:hover {
    box-shadow: 0 .25em .75em rgba(0,0,0,.08);
    transform: translateY(-1px);
}

/* Key Points callout. AI content emits <section class="key-points"> with
   bootstrap utility classes (.card .border-0 .bg-light .p-3 .mb-4); the
   utility classes use Bootstrap's default !important, so any property
   that targets the same value MUST also use !important to win. Properties
   not fighting a utility (border-radius, letter-spacing, font-weight=700
   matching .fw-bold) rely on selector specificity (.aic-scope .key-points
   = 0,2,0) and skip !important. */
.aic-scope .key-points {
    /* --aic-primary-soft is the publisher's primary color with 10%
       alpha, computed server-side in mas_aic_palette_css_vars() so
       it's a plain rgba string — works everywhere without depending
       on color-mix() (which Safari pre-16.2 silently drops, falling
       back to .bg-light gray). */
    background: var(--aic-primary-soft, rgba(31, 58, 95, 0.1)) !important;
    border-radius: .5em;
    padding: 1.5em 1.75em !important;                              /* fights .p-3 */
    margin: 0 0 2em !important;                                    /* fights .mb-4 */
}
.aic-scope .key-points-heading {
    color: var(--aic-primary, #1f3a5f) !important;                 /* fights .text-muted */
    font-size: .8em;
    letter-spacing: .1em;
    margin: 0 0 .9em !important;                                   /* fights .mb-2 */
    font-weight: 700;
}
.aic-scope .key-points-list {
    margin: 0 !important;                                          /* fights .mb-0 */
    padding-left: 1.25em !important;                               /* fights .ps-3 */
}
.aic-scope .key-points-item {
    margin-bottom: .55em !important;                               /* fights .mb-1 */
    line-height: 1.5;
}
.aic-scope .key-points-item:last-child {
    margin-bottom: 0 !important;                                   /* fights .mb-1 */
}
/* Hide any 5th+ bullet on legacy pages that were generated when the
   writer prompt asked for 3-5. New renders are already capped at 4
   in section_renderer.php; this rule is just so existing published
   pages reflect the cap without needing regeneration.
   :nth-child wins the :last-child margin-bottom rule via specificity
   tie + later source order, so the 4th item gets the 0 margin. */
.aic-scope .key-points-item:nth-child(n+5) {
    display: none;
}
.aic-scope .key-points-item:nth-child(4) {
    margin-bottom: 0 !important;
}

/* School ranking cards (ranked listing sections). Tighter title size
   and looser body line-height so the long descriptions read well. */
.aic-scope [class*="school-card"] .card-title {
    font-size: 1.35em;
    line-height: 1.25;
}
.aic-scope [class*="school-card"] .card-text {
    line-height: 1.6;
}

/* Rank badge ("#1", "#2"...) — clean flat circle in the publisher's
   primary color. Same treatment for all 10 ranks so the eye reads
   the position number, not the medallion. Sized in px so the circle
   stays consistent regardless of theme root font-size.
   The renderer bakes Bootstrap utility classes onto the span
   (.bg-primary .rounded-pill .fs-6), and Bootstrap utilities use
   !important — so the three properties that fight a utility need
   !important to win, while everything else relies on selector
   specificity (.aic-scope [class*="school-card"] .badge = 0,3,0). */
.aic-scope [class*="school-card"] .badge {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px !important;                          /* fights .fs-6 utility */
    font-weight: 600;
    border-radius: 50% !important;                       /* fights .rounded-pill utility */
    padding: 0;
    background: var(--aic-primary, #1f3a5f) !important;  /* fights .bg-primary utility */
    color: #fff;
    flex: 0 0 auto;
}

/* Move the rank badge to the LEFT of the school name. The renderer
   emits <h4>{name}</h4><span class="badge">#1</span> inside a
   .d-flex.justify-content-between, which puts the name far-left
   and the badge far-right. Flipping to justify-content:flex-start
   with order:-1 on the badge swaps them visually while keeping
   DOM order (so screen readers announce the school name first,
   then the rank — semantically correct).
   .card-title gets flex:0 0 auto explicitly because publisher
   themes (Knote, etc.) commonly grow card-title to fill the row,
   which would push the badge back to the right despite our
   justify-content override. */
.aic-scope [class*="school-card"] .card-body > .d-flex {
    justify-content: flex-start !important;  /* fights .justify-content-between utility */
    align-items: center !important;          /* fights .align-items-start utility */
    gap: 14px;
}
.aic-scope [class*="school-card"] .card-body > .d-flex .card-title {
    /* 0 1 auto: don't grow (so badge stays on the left) but can shrink
       so long titles like "University of Oklahoma-Norman Campus" wrap
       within the card on mobile instead of overflowing. min-width:0
       is required for a flex item to actually shrink below its
       intrinsic content width (default is min-width:auto). */
    flex: 0 1 auto;
    min-width: 0;
}
.aic-scope [class*="school-card"] .card-body > .d-flex .badge {
    order: -1;
}

/* City + tuition meta line ("Denton, TX · $12,000/yr"). Add a touch
   of vertical breathing room so it reads as its own beat between
   the school name and the Best-for tag below. */
.aic-scope [class*="school-card"] .card-body > .text-muted.small {
    margin-top: .5em !important;
    margin-bottom: .65em !important;
}

/* Best-for differentiator (top-3 only). Bootstrap-flavored callout:
   subtle tinted background, primary-colored left rule, and a
   bullseye icon prefix from Bootstrap Icons (already enqueued via
   the plugin). Targeted via the rendered class combo
   (p.text-body-secondary.small) so we don't need :has(). */
.aic-scope [class*="school-card"] .card-body > p.text-body-secondary.small {
    display: inline-block;
    /* --aic-accent-soft is fed from one of two sources, in order:
       (1) the AI-derived accent hex returned by update-site-brand
           when the publisher saves their palette (Claude picks a
           brand-pairing color that fits the publisher's vertical),
       (2) the math-derived 180° hue-rotation complement as fallback.
       Either way the var resolves to a 10%-alpha tint that contrasts
       the Key Points block above (which uses --aic-primary-soft). */
    background: var(--aic-accent-soft, rgba(184, 128, 64, 0.1));
    border-left: 3px solid var(--aic-primary, #1f3a5f);
    padding: .4em .8em .4em .65em !important;
    border-radius: .25em;
    margin: 0 0 .85em !important;
}
.aic-scope [class*="school-card"] .card-body > p.text-body-secondary.small::before {
    /* U+2605 Black Star — picks up the surrounding font, no font-family
       dependency. The Bootstrap-Icons codepoint we tried first (\F286)
       maps to a different glyph in 1.11.3 than what its name suggests,
       and version-pinning glyph codepoints is brittle anyway. */
    content: "\2605";
    margin-right: .5em;
    color: var(--aic-primary, #1f3a5f);
    font-size: 1.05em;
    line-height: 1;
}

/* "How we ranked these" methodology toggle — small text link, right
   aligned via display:block + margin-left:auto on the button itself.
   The rendered HTML (.btn .btn-sm .btn-outline-secondary) only uses
   Bootstrap component classes, none of which use !important — so our
   selector specificity (0,2,1) wins on every property without needing
   !important to fight back. */
.aic-scope button[data-bs-target^="#aic-methodology"] {
    display: block;
    margin-left: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: .25em 0;
    color: var(--aic-primary, #1f3a5f);
    font-weight: 500;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(0, 0, 0, .25);
}
.aic-scope button[data-bs-target^="#aic-methodology"]:hover {
    text-decoration-color: currentColor;
}
.aic-scope button[data-bs-target^="#aic-methodology"] .bi-chevron-down {
    transition: transform .15s ease;
}
.aic-scope button[data-bs-target^="#aic-methodology"][aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

/* Related Articles block — soft accent wash, primary-60 border.
   Accent is the AI-picked (or math-complement) of primary, so a
   primary border on accent background lands as the natural
   color-wheel pair. The renderer wraps the list in
   <div class="aic-related-articles"> inside a section, so we can
   target the inner div and leave the section heading alone (it
   already picks up the H2 secondary-color rule above). */
.aic-scope .aic-related-articles {
    background: var(--aic-accent-10, rgba(184, 128, 64, 0.1));
    border: 1px solid var(--aic-primary-60, rgba(31, 58, 95, 0.6));
    border-radius: .5em;
    padding: 1em 1.25em;
}
/* Bootstrap's .list-group-item ships with background-color:#fff which
   would cover our accent wash. Transparent it out, tone the row
   separators down to primary-10 so they don't compete with the
   container border. */
.aic-scope .aic-related-articles .list-group,
.aic-scope .aic-related-articles .list-group-item {
    background: transparent;
}
.aic-scope .aic-related-articles .list-group-item {
    border-color: var(--aic-primary-10, rgba(31, 58, 95, 0.1));
    padding: .9em .25em;
}
.aic-scope .aic-related-articles .list-group-item:hover,
.aic-scope .aic-related-articles .list-group-item:focus {
    background: var(--aic-primary-10, rgba(31, 58, 95, 0.1));
}

/* Row layout: leading icon, title (flex-grows), trailing chevron.
   The chevron eases right on hover to give a subtle "go" affordance
   without flashing or animating loudly. */
.aic-scope .aic-related-articles__row {
    display: flex;
    align-items: center;
    gap: .85em;
}
.aic-scope .aic-related-articles__icon {
    color: var(--aic-primary, #1f3a5f);
    font-size: 1.15em;
    flex-shrink: 0;
}
.aic-scope .aic-related-articles__title {
    flex: 1 1 auto;
    min-width: 0;
}
.aic-scope .aic-related-articles__chevron {
    color: var(--aic-primary, #1f3a5f);
    font-size: 1em;
    flex-shrink: 0;
    opacity: .5;
    transition: transform .15s ease, opacity .15s ease;
}
.aic-scope .aic-related-articles__row:hover .aic-related-articles__chevron,
.aic-scope .aic-related-articles__row:focus .aic-related-articles__chevron {
    opacity: 1;
    transform: translateX(3px);
}

/* Ask-Yourself block — reflective questions wrapped via the
   list_group widget (which renders each item with .fw-bold
   inside .list-group-item). Default Bootstrap weight on every
   row makes a stack of long questions feel shouty. Tone the
   weight down to 500 and prefix each row with a numbered
   primary-color medallion so the rows read as a stepped
   checklist of prompts. */
.aic-scope .aic-ask-yourself .list-group-item {
    border-color: var(--aic-primary-10, rgba(31, 58, 95, 0.1));
}
/* CSS-counter numbering — list-group items are <div>s, not <li>s,
   so the browser doesn't auto-number them. Reset on the wrapper,
   increment on each item, render via ::before. */
.aic-scope .aic-ask-yourself .list-group {
    counter-reset: aic-question;
}
.aic-scope .aic-ask-yourself .list-group-item {
    counter-increment: aic-question;
}
.aic-scope .aic-ask-yourself .list-group-item .fw-bold {
    font-weight: 500 !important;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: .65em;
}
.aic-scope .aic-ask-yourself .list-group-item .fw-bold::before {
    content: counter(aic-question);
    flex: 0 0 auto;
    width: 1.6em;
    height: 1.6em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--aic-primary, #1f3a5f);
    color: #fff;
    font-weight: 700;
    font-size: .8em;
    line-height: 1;
    margin-top: .15em;
}