/**
 * style.bundle.state-solutions.css
 * State Solutions — design token additions
 *
 * Drop this file alongside style.bundle.custom.css and @import it last,
 * OR append its contents directly to style.bundle.custom.css.
 *
 * This file adds only the four cornerstone tokens required by the
 * State Solutions product. All shared structural styles (portlets,
 * accordions, nav, layout) live in style.bundle.custom.css and are
 * inherited unchanged.
 *
 * Cornerstone color assignments:
 *   American Heritage    #264a59  (Heritage Navy — authority, tradition)
 *   Free Enterprise      #799b28  (Heritage Green — growth, market)
 *   National Security    #a0252b  (Heritage Red — strength, defense)
 *   The American Family  #e87d1e  (Heritage Orange — warmth, community)
 *
 * These are intentionally drawn from the existing Solutions palette so
 * the two products share a consistent visual language. Adjust hex values
 * here if product design requires distinct tones.
 */

/* ============================================================
   CORNERSTONE FONT COLORS  (kt-font-*)
   Used in: portlet head title, nav icons, accordion icon hover
   ============================================================ */

.kt-font-american-heritage   { color: #264a59; }
.kt-font-free-enterprise     { color: #799b28; }
.kt-font-national-security   { color: #a0252b; }
.kt-font-american-family     { color: #e87d1e; }

/* ============================================================
   CORNERSTONE LEFT-BORDER ACCENT  (bl_*)
   Applied to .kt-portlet.square — 8px colored left border
   ============================================================ */

.kt-portlet.square.bl_american-heritage  { border-left: 8px solid #264a59 !important; }
.kt-portlet.square.bl_free-enterprise    { border-left: 8px solid #799b28 !important; }
.kt-portlet.square.bl_national-security  { border-left: 8px solid #a0252b !important; }
.kt-portlet.square.bl_american-family    { border-left: 8px solid #e87d1e !important; }

/* ============================================================
   CORNERSTONE NAV BADGE DOTS  (kt-list__badge--*)
   Colored bullet in the sidebar nav list
   ============================================================ */

.kt-list .kt-list__item .kt-list__badge.kt-list__badge--american-heritage:before  { background-color: #264a59; }
.kt-list .kt-list__item .kt-list__badge.kt-list__badge--free-enterprise:before    { background-color: #799b28; }
.kt-list .kt-list__item .kt-list__badge.kt-list__badge--national-security:before  { background-color: #a0252b; }
.kt-list .kt-list__item .kt-list__badge.kt-list__badge--american-family:before    { background-color: #e87d1e; }

/* ============================================================
   ACCORDION CARD TITLE ICON COLORS  (.card-title.<bare-class>)
   Active (expanded) state — icon inherits cornerstone color
   ============================================================ */

.accordion .card .card-header .card-title.american-heritage  > i { color: #264a59; }
.accordion .card .card-header .card-title.free-enterprise    > i { color: #799b28; }
.accordion .card .card-header .card-title.national-security  > i { color: #a0252b; }
.accordion .card .card-header .card-title.american-family    > i { color: #e87d1e; }

/* Hover state (collapsed) */
.accordion.accordion-outline .card .card-header .card-title.american-heritage.collapsed:hover  i { color: #264a59; transition: color .3s ease; }
.accordion.accordion-outline .card .card-header .card-title.free-enterprise.collapsed:hover    i { color: #799b28; transition: color .3s ease; }
.accordion.accordion-outline .card .card-header .card-title.national-security.collapsed:hover  i { color: #a0252b; transition: color .3s ease; }
.accordion.accordion-outline .card .card-header .card-title.american-family.collapsed:hover    i { color: #e87d1e; transition: color .3s ease; }


/* ============================================================
   SECTION COUNT BADGE
   Rendered via CSS ::after on h2[data-section-count] elements
   inside .card-body.

   To suppress badges entirely:
       .card-body h2[data-section-count]::after { display: none; }

   To show them:
       Remove or comment out the display:none rule below.
   ============================================================ */

.card-body h2[data-section-count] {
    display: flex;
    align-items: baseline;
    gap: .5em;
}

.card-body h2[data-section-count]::after {
    content: attr(data-section-count);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    height: 1.5em;
    padding: 0 .4em;
    font-size: .625em;          /* relative to h2 font-size */
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background-color: rgba(38, 74, 89, .35);
    border-radius: 999px;
    vertical-align: middle;
    /* To suppress: uncomment the line below */
    /* display: none; */
}

/* ============================================================
   SOURCE PARAGRAPH STYLING
   .rec-source paragraphs emitted by the pipeline inside
   .card-body.  Uses existing accordion link styles.
   ============================================================ */

.card-body p.rec-source {
    font-size: 1.1rem;
    font-weight: 400;
    color: rgba(38, 74, 89, .7);
    margin-bottom: 1.5rem;
    padding-top: 0;
}

.card-body p.rec-source strong {
    font-weight: 600;
    color: rgba(38, 74, 89, .6);
    margin-right: .25em;
}

.card-body p.rec-source a {
    color: #027dbd;
    font-weight: 500;
    transition: color .3s ease;
}

.card-body p.rec-source a:hover {
    color: #004b8d;
}

/* ============================================================
   SECTION HEADINGS INSIDE RECOMMENDATIONS BODY
   h2 elements inside .card-body correspond to document H2
   sections (e.g. "I. ENERGY POLICY").
   ============================================================ */

.card-body h2 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #a0252b;
    margin-top: 1.75rem;
    margin-bottom: .75rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid rgba(38, 74, 89, .15);
}

.card-body h2:first-child {
    margin-top: 0;
}


/* ============================================================
   RECOMMENDATION BLOCK  (.rec)
   Each recommendation is wrapped in <div class="rec"> by the
   pipeline. Spacing is controlled here — not via p-tag heuristics.

   Visual anatomy per block:
     .rec                — the container; bottom margin separates recs
     .rec > p:first-child  — rec title (bold <strong>); no top space
     .rec > p            — body paragraph; no top space
     .rec > p.rec-source — source line; muted, sits flush under body
   ============================================================ */

.card-body .rec {
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(38, 74, 89, .08);
}

.card-body .rec:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Rec title paragraph */
.card-body .rec > p:first-child {
    margin-top: 0;
    margin-bottom: .3rem;
}

/* Body paragraph(s) */
.card-body .rec > p {
    margin-top: 0;
    margin-bottom: .4rem;
}

/* Source line — flush under body, no extra gap */
.card-body .rec > p.rec-source {
    margin-top: .4rem;
    margin-bottom: 0;
}

/* ============================================================
   EXPERT CONTACT CARD
   Renders inside its own card panel at the bottom of the
   accordion, after Recommendations and Sources.
   ============================================================ */

.expert-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
}

.expert-card__photo {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    background-color: rgba(38, 74, 89, .1);
}

.expert-card__photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: rgba(38, 74, 89, .12);
    flex-shrink: 0;
    color: rgba(38, 74, 89, .4);
    font-size: 1.6rem;
}

.expert-card__body {
    flex: 1;
    min-width: 0;
}

.expert-card__name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #264a59;
    margin: 0 0 .15rem;
    line-height: 1.2;
}

.expert-card__title {
    font-size: .9rem;
    font-weight: 500;
    color: rgba(38, 74, 89, .65);
    margin: 0 0 .5rem;
    line-height: 1.3;
}

.expert-card__link {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    font-size: .875rem;
    font-weight: 600;
    color: #027dbd;
    text-decoration: none;
    transition: color .2s ease;
}

.expert-card__link:hover {
    color: #004b8d;
    text-decoration: underline;
}

.expert-card__link i {
    font-size: .9rem;
}

/* ============================================================
   ASIDE PRIMARY — DEFENSIVE WIDTH CLAMP
   style.bundle.custom.css sets width: 70px; this reinforces it
   to prevent any flex child from causing overflow.
   ============================================================ */

.kt-aside .kt-aside__primary {
    max-width: 70px;
    overflow: hidden;
}