/* site map */
.sitemap-page,
.payYourBillWrapper {
    padding: 6rem 3%;
}
.sitemap-page .description {
    margin: 0 0 3rem;
}
    .sitemap-page .entity-title {
        border-bottom:1px solid var(--tertiary-color-2);
    }
    .sitemap-page .entity-title h5 {
        margin:0;
    }


.sitemap-page .entity-body {
    padding: 1rem 0 6rem 0;
}

.sitemap-page ul {
    padding:0;
    margin:0;
    display:flex;
    flex-wrap:wrap;
}

    .sitemap-page li {
        padding: 1rem 2rem .5rem 0;
    }

    .sitemap-page a:empty {
        display: none;
    }


.registration-page {
    margin-top: 6rem;
}


/* #region Help & Contact Us Category Pages  */

.category-page {
    position: relative;
}
.categoryContentWrapper {
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0;
}


.category-description ul {
    list-style-type: disc;
}

.category-description ol {
    list-style-type: decimal;
}

.category-description li {
    padding: 1rem 0 0;
}

.categoryIntroCopy {
    padding: 6rem 6%;
    text-align: center;
    font-size: 2.4rem;
    line-height: 5rem;
}
/* CATEGORY BANNER STYLES XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

/* SECTION HEADER */

/* SECONDARY BANNERS */
                

/* TERTIARY BANNERS */


/* HEADER ADJUSTABLE BANNERS */

                            
/* HEADER ADJUSTABLE BANNERS IN SLIDER */
    /*.slick-dotted.slick-slider {margin-bottom: 120px;}*/
                    
/* AUTHOR BANNERS */


    /* VIDEO BANNER STYLES */


    /* VIDEO BANNER STYLES */


    /* NOP 4.0 BANNER STYLES **************************************************************************************************************************************** */


    .breadcrumb.noShow {
        display: none;
    }

    /* THIS HIDES THE DEFAULT PRODUCT GRID WHEN THE CONTENT TAB SETS THE GRID TO UNPUBLISHED */
    .js-category-content-product-group-default-unpublished {display: none !important;}


.center-1 .CokesburyFiltersCategoryWrapper .listbox {
    width: 25%;
}

    .center-1 .CokesburyFiltersCategoryWrapper select {
        width: 100%;
    }

    .CokesburyFiltersWrapper {
        display: block;
        position: relative;
        width: 74%;
        height: 75px;
        margin: 0px;
        padding: 0px;
        vertical-align: top;
        overflow: hidden;
        float: right;
        margin-top: -75px;
    }

        .CokesburyFiltersWrapper .filter-content {
            padding: 15px 0px 10px 0px;
            margin: 0px;
        }

            .CokesburyFiltersWrapper .filter-content select {
                width: 32%;
                margin-right: 10px;
                margin-bottom: 10px;
            }

.categoryBanner.singleBanner {position: relative;}
/* help pages */


    /* login/register */

    .external-authentication .title {
        font-size: 1.6rem;
        color: var(--tertiary-color-3);
        font-style: italic;
        margin-top: 1rem;
    }

    /* .login-page / .password-recovery-page page padding now lives in Cokesbury.css (3rem top);
       dead .loginBtn--facebook rules removed (the live control is the plugin's .facebook-btn) */

    .forgot-password {
        float: right;
        /* .inputs sets font-size:0 (stock nop's inline-block whitespace hack) and every
           other child re-declares its own size - this one never did, so the link
           inherited 0 and rendered as a 0x0 invisible box. 1.6rem matches production. */
        font-size: var(--main-font-size);
    }

    .checkout-as-guest-or-register-block .topic-block-body ul {
        padding: 0;
        margin: 0;
    }

        .checkout-as-guest-or-register-block .topic-block-body ul > li {
            color: var(--tertiary-color-3);
            font-style: italic;
        }

    .result {
        text-align: center;
    }

.not-found-page {
    padding: 6rem 3% 0;
}


/*#endregion*/
.temporaryBannerPlaceholder {
    width: 100%;
    height: 16rem;
    background: url('/Themes/Cokesbury/Content/images/headers/SearchBackground.jpg') no-repeat left top;
}


    .master-column-wrapper > .center-1 > .topic-page {
        padding: 6rem 3%;
    }


    /* Account Application styles */

    formdecisiontree {
        display: block;
        width: 100%;
    }


        formdecisiontree label {
            font-size: 1.8rem;
            display: inline-block;
            margin-bottom: 1rem;
        }

        formdecisiontree input[type='text'], formdecisiontree select {
            width: 100%;
            height: 60px;
            display: block;
        }

        formdecisiontree select {
            -webkit-appearance: none;
            -moz-appearance: none;
            background: url('/Themes/Cokesbury/Content/images/filter_dropdown_arrow.svg') var(--surface-color) right 2rem center no-repeat;
        }

    .divApplicationLeft {
        display: none;
    }


    /*.divApplicationLeft .listbox div {
        position: absolute;
        width: 100%;
        text-align: right;
        padding-right: 20px;
        margin-top: -5px;
        display: none;
    }*/

    .divApplicationRight {
        display: block;
        width: 100%;
        max-width: 680px;
        vertical-align: top;
        position: relative;
        margin: auto;
    }

    formdecisiontree, .divApplicationLeft .listbox {
        display: block;
        position: relative;
    }

    .applicationGroup {
        display: block;
        margin-bottom: 80px;
    }


    /* compare products */


    .compare-products-page {
        position: relative;
        overflow: hidden;
        padding: 6rem 3%;
    }


        .compare-products-page .table-wrapper {
            margin: 0 0 30px;
            overflow-x: auto;
        }

    /* ONE markup, two layouts (compare sweep 2026-08-07): every product is a COLUMN div
       (.compareItem) that doubles as the phone card. Desktop: the container is a grid,
       auto-flowing one column per child, and each column is a SUBGRID sharing the
       container's row tracks (--compare-rows set inline by the view) — that is what keeps
       "Price" level with "Price" across products; plain display:table cannot render
       products-as-columns from product-major markup. Browsers without subgrid still get
       the columns, just without exact row alignment. ≤767: mediaqueries.css turns the
       container to block, hides .compareLabels, and the columns become cards. */
    .compareMatrix {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: max-content;
        grid-auto-columns: minmax(150px, 1fr);
        grid-template-rows: repeat(var(--compare-rows), auto);
    }

    .compareLabels,
    .compareItem {
        display: grid;
        grid-row: 1 / span var(--compare-rows);
        grid-template-rows: subgrid;
    }

    .compareCell {
        min-width: 0;
        /* theme tokens, matching the mobile card chrome (PR #119 review — no raw hex) */
        border: 1px solid var(--tertiary-color-2);
        background-color: var(--surface-color);
        padding: 20px;
        text-align: left;
        color: var(--dark-gray-color);
    }

        .compareCell label {
            font-weight: normal;
            color: var(--gray-color);
        }

    .cellRemove {
        text-align: center;
    }

    .cellName {
        font-weight: bold;
    }

    .cellDescription {
        line-height: 22px;
    }

    /* per-cell inline labels are the CARD's captions — desktop shows the label column */
    .compareCell .cellLabel {
        display: none;
    }

    .cellPicture .picture {
        display: block;
        position: relative;
        max-width: 200px;
        height: 200px;
        overflow: hidden;
        margin: auto;
    }

        .cellPicture .picture img {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            max-width: 100%;
            max-height: 100%;
        }

    .compare-products-page .no-data {
        margin: 25px 0 0;
    }


    /*** WISHLIST & COMPARE LIST ***/

    .compare-products-page .page-title {
        margin: 0 0 -1px;
    }

    /* (.clear-list float retired — the styles.css base rule pins it absolute on the
       title row at the grid edge, compare sweep 2026-08-07) */


	/* pay your bill */
.payYourBillWrapper #opc-payment_info {
    margin-top: 6rem;
}

.html-widget {
    grid-row: 1;
    grid-column: 1 / span 3;
    text-align: center;
}


/* SEARCH PAGE SECTION HEADERS */

.search-page .search-input {
  display: grid; 
  grid-template-columns: 3fr 1fr; 
  grid-gap: 20px;
}

.search-page .search-input .fieldset {
    margin-bottom:0px;
}


  .search-page .search-input .inputs {
    display: grid;
    grid-template-columns: 1fr 5fr;
  }


    .search-page .search-input .inputs label {
      font-size: 1.6rem;
      color: var(--dark-text-color);
      font-weight: 700;
      display: inline-block;
      margin-right: 1.5rem;
      margin-top: 1.3rem;
    }

    .search-page .search-input .inputs input.search-text {
      width: 100%;
      display: inline-block;
    }


    .search-page .search-input .inputs.reversed .checkboxwrapper {
      grid-column: 2;
      text-align: left;
      padding-left: 30px;
      vertical-align: top;
    }

    .search-page .search-input .inputs.reversed label {
      font-size: 1.6rem;
      color: var(--dark-text-color);
      font-weight: normal;
      display: inline-block;
      margin-right: 1.5rem;
      margin-top: 0px;
      vertical-align: top;
    }

    .search-page .search-input .inputs.reversed input[type="checkbox"] {
      width: 20px;
      height: 20px;
      display: inline-block;
    }

.search-page .search-input .buttons button{
    margin-top: 3.5rem;
}


/* help pages */


/* help pages */


.category-description ul.questionWrapper {
  width: 100%;
  padding: 0;
  border: 1px solid var(--tertiary-color-2);
  border-bottom: 0;
  margin: 2rem 0 6rem;
  list-style: none;
}

  .category-description ul.questionWrapper > li {
    padding: 0;
  }

  .category-description ul.questionWrapper .question {
    background-color: var(--surface-color);
    font-size: 2rem;
    font-weight: 700;
    padding: 2rem 6rem 2rem 2rem;
    position: relative;
    border-bottom: 1px solid var(--tertiary-color-2);
    cursor: pointer;
    transition: linear 100ms;
  }

.category-description .expandAll {
  position: relative;
  padding: 0px 10rem 0 0;
}

  .category-description .expandAll:after {
    content: 'Expand All';
    color: var(--main-color);
    position: absolute;
    right: 0;
    font-size: 1.6rem;
  }

  .category-description .expandAll.collapsed:after {
    content: 'Collapse All';
    color: var(--main-color);
    position: absolute;
    right: 0;
    font-size: 1.6rem;
  }

ul.questionWrapper .question:after {
  content: url('/Themes/Cokesbury/Content/images/accordian_expand_icon.svg');
  position: absolute;
  right: 2rem;
  top: 1.7rem;
  transition: all 0.3s ease;
}

ul.questionWrapper .question:hover {
  background-color: var(--tertiary-color-1);
  transition: all 0.3s ease;
}

ul.questionWrapper .question.active {
  background-color: var(--main-color);
  color: var(--light-text-color);
  transition: all 0.3s ease;
}


  ul.questionWrapper .question.active:after {
    content: url('/Themes/Cokesbury/Content/images/accordian_collapse_icon.svg');
    transition: all 0.3s ease;
  }


ul.questionWrapper .answer {
  display: none;
  padding: 3rem;
  border-bottom: 1px solid var(--tertiary-color-2);
}

ul.questionWrapper ul.answer {
  padding: 3rem 6rem;
}


.html-curriculum-category-page .page-title {
display: none;
}

.html-category-products-page .breadcrumb,
.html-category-page .breadcrumb {
    display: none;
}

.html-curriculum-category-page .page-body, .html-category-page .page-body, .html-help-page .page-body, .html-category-products-page .page-body {
  padding: 20px 0px 0px 0px;
  display: grid;
  row-gap: 2rem;
  grid-template-areas: 'topBanners' 'content1' 'productSelectors' 'productGrid' 'content2';
  grid-template-rows: repeat(1fr);
}

.html-category-products-page .page-body {
  padding: 20px 0px 0px 0px;
  display: grid;
  row-gap: 2rem;
  grid-template-areas: 'topBanners' 'subcategoryGrid' 'productSelectors' 'productGrid''content1' 'content2';
  grid-template-rows: repeat(1fr);
}

/* grid items default to min-width:auto and refuse to shrink below their content's intrinsic
   width — wide banner content (e.g. the slick track measuring unwrapped author-bio text) blows
   the single column out past the page. Let every page-body grid child shrink to the column. */
.html-curriculum-category-page .page-body > *,
.html-category-page .page-body > *,
.html-help-page .page-body > *,
.html-category-products-page .page-body > * {
  min-width: 0;
  max-width: 100%;
}

.sub-category-grid {
    grid-area: subcategoryGrid;
}

#categoryBanners {
    grid-area: topBanners;
}

#categoryContent {
    grid-area: content1;
}

#categoryContent2 {
    grid-area: content2;
}

.product-selectors {
    grid-area: productSelectors;
}

.products-container {
    grid-area: productGrid;
}

.contentProductGridWrapper {
    grid-area: productGrid;
}


.temporaryBannerPlaceholder > h1 {
    font-size: 6.4rem;
    color: var(--light-text-color);
    line-height: 16rem;
    text-align: center;
}

/* Homepage hero slides: the homepage IS a category page (html.home-category-page), so the
   generic .category-page h1 override (3.2rem, meant for catalog page titles) shrinks the
   hero headlines — the hero keeps the full h1 display size. */
.home-category-page .category-page h1 {
    font-size: 4.8rem;
}