#searchFrame {
    border: none;
    margin: 0;
    padding: 0;
}


.facets-container {
    border: 1px solid #EEF0F3;
}


.facets-container .facets-panel-title,
.facets-container h2#as-facets-panel-title {
    color: #ffffff !important;
}


.results-content .as-results-item {
    color: #333333;
    padding: 24px 0 !important;
}


.results-content .as-results-item .field-type-hyperlink {
    font-size: 1.4em;
}


.results-content .as-results-item .field-type-hyperlink .field-value a,
.results-content .as-results-item .field-type-hyperlink a.field-value {
    color: #2D4A6E;
}


.results-content .as-results-item .field-type-text {
    font-size: 1.3em;
    padding: 0 10px;
    color: #333333;
}


mo-search-bar .search-bar-input {
    font-size: 14px;
}


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

/*
     * Custom styling for SOM template (gaps that template config can't express).
     *
     * Selectors use data-component-name rather than the grid-item UUID. The
     * template config gets fresh UUIDs every time it's recreated in App Studio,
     * which silently breaks UUID-pinned CSS. data-component-name is the
     * stable hook the embeddables runtime puts on every component wrapper.
     * Assumes one of each component type on this page (true for this template).
     *
     * !important is used where the template config writes inline styles or the
     * bundled embeddables.css applies higher-specificity defaults.
     */

/* TEXT "Search Results" — dark blue heading bar matching the facets panel title.
       Future fix: KUMO-1284 adds backgroundColor to TextStyling; once shipped,
       set it in the template JSON and drop this rule entirely. */
[data-component-name="TEXT"],
[data-component-name="TEXT"] .grid-item-content,
[data-component-name="TEXT"] as-text {
    background-color: #405574 !important;
}

[data-component-name="TEXT"] .as-text {
    color: #ffffff !important;
    /* Horizontal padding only; vertical padding comes from JSON textPaddingTop
         so the component's --as-text-padding-top variable can take effect.
         
         Future fix: KUMO-1284 adds textPaddingRight and textPaddingBottom
         to TextStyling — once shipped, drop these and use the JSON fields for
         all four sides symmetrically. */
    padding-left: 15px;
    padding-right: 15px;
}

/* RESULTS list — copied from live searchapp.mo.gov's li.result measured values:
         - padding: 0 0 14px  (live uses 0 top, 14px bottom — tight stacked look)
         - margin:  0 0 14px  (live also uses 0/0/14 additive on top of padding)
         - border-bottom: none (live has no inter-row hairlines, just whitespace)
       Combined: padding-bottom + margin-bottom = 28px between rows = live's gap.

       Future fix: KUMO-712 closes all 3. Once KUMO-712 ships, this entire block disappears in favor of two JSON
       fields: rowDivider: false and resultGap: <N>. */
[data-component-name="RESULTS_LIST_SEARCH"] li.as-results-item {
    padding: 0 0 14px !important;
    margin: 0 0 14px !important;
}

/* Space after the hairline divider between the sort/header row and the first result.
       Component renders a 1px border-bottom on .results-header; margin-bottom
       lives below that border.

       Future fix: KUMO-712 Task #13 (spacing refactor) eliminates this rule
       structurally. */
[data-component-name="RESULTS_LIST_SEARCH"] .results-header {
    margin-bottom: 14px !important;
}

/* FACETS panel — remove the 12px of top padding from as-facets so the
       Refine bar starts at the same y as the Search Results bar above the
       results column. 
       
       Future fix: KUMO-712 Task #12 adds containerPadding to FacetStylingConfig.
       Once shipped, set containerPadding: 0 in the template JSON and drop this
       rule. */
[data-component-name="FACETS_SEARCH"] as-facets {
    padding-top: 0 !important;
}