/* ----------------------------
   GLOBAL VARIABLES
---------------------------- */
:root {
    /* BYU Brand Colors */
    --byu-navy: #002E5D;
    --byu-royal: #0062B8;
    --byu-white: #FFFFFF;
    --byu-dark-gray: #141414; /* Main text color */
    --byu-medium-gray: #666666; /* Use for less frequent text if necessary */

    --image-overlay: rgba(0, 0, 0, 0.2); /* Different definition style to account for opacity */
    --byu-background: #FAFAFA; /* Primary background color of BYU sites */

    /* Download Button Colors */
    --btn-background: #e9e9e9;
    --btn-background-hover: #d3d2d2;
    --download-btn-pdf: #A40000;
    --download-btn-doc: #0047A4;
    --download-btn-xls: #007E04;

    /* Fonts */
    --ringside-headers: "HCo Ringside Narrow SSm", "Palatino Linotype", "Palatino", Times, "Times New Roman";
    --body-text: "Public Sans", "Lucida Grande", "Lucida Sans", Helvetica, Arial, sans-serif;
}

/* ----------------------------
   MOBILE STYLES
---------------------------- */
@media (max-width: 52em) {
    iframe {
        display: none;
    }

    .btn-download {
        display: block;
    }

    /*
     * I don't know where the id came from. This seems janky
     * but it's the best solution I found so far.
     */
    .embed-responsive-4by3::before {
        padding-top: 0 !important;
    }

    .dropdown-item {
        padding: 1rem 1.5rem !important;
    }

    #chemigram_years_dropdown {
        width: 100%;
    }

    .dropdown {
        margin-bottom: 1em;
    }

    .btn-secondary {
        width: 100%;
        margin-bottom: 0.25em;
        margin-top: 0.25em;
        height: 4em;
    }

    .row {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .page-item {
        width: 5em;
        text-align: center;
    }

    .page-link {
        padding: 1em;
    }

    h1 {
        margin-left: 1em;
    }

    .col-4 {
        margin: 1em;
    }

    #news_more_link_desktop {
        display: none !important;
    }

    #news_more_link_mobile {
        display: block !important;
        margin-bottom: 1em;
    }

    #new_more_link_mobile_button {
        width: 100%;
        height: 3em;
        color: black;
    }

    #search_form_search_field {
        width: 65% !important;
    }

    .card {
        margin-left: auto;
        margin-right: auto;
    }

    .btn-card {
        padding-top: 1em !important;
        padding-bottom: 1em !important;
        width: 100%;
    }

    #small_search_bar {
        height: 4em;
    }
}

@media (min-width: 52.1em) {
    iframe {
        display: block;
    }

    /*.btn-download {
        display: none !important;
    }*/
}

/* ----------------------------
   PAGE-SPECIFIC
---------------------------- */
/* BASE.HTML & GENERAL PAGE SETUP */
html {
    /* font-size: 100%; */
    /* overflow-y: scroll; */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    height: 100%; /* One component of the sticky footer */
}

#news_more_link_desktop {
        display: block;
    }

    #news_more_link_mobile {
        display: none;
    }

body {
    /* margin: 0; */
    height: 100%;
    font-family: var(--body-text) !important;
}

.containing-element {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#content {
    overflow: visible;
    flex-grow: 1;
    *zoom: 1;
    margin-bottom: 3rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ringside-headers) !important;
}

h1 {
    margin-bottom: 1.75rem !important;
}

h2 {
    margin-bottom: 1.5rem !important;
}

h3 {
    margin-bottom: 1.25rem !important;
}

h4 {
    margin-bottom: 1.1rem !important;
}

h5 {
    margin-bottom: 1rem !important;
}

h6 {
    margin-bottom: 0.8rem !important;
}

label {
    font-weight: bold !important;
    font-size: 0.85rem !important;
    font-family: var(--ringside-headers) !important;
}

.content-img, iframe {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.iframe-no-top-margin {
    margin-top: 0rem !important;
}

.no-display {
    display: none !important;
}

.p-modal-bottom-margin {
    margin-bottom: 1rem !important;
}

.italicize {
    font-style: italic !important;
}

h6.mb-2-subtitle {
    margin-bottom: 0.8rem !important;
}

.col-sm-6 a {
    color: #3344C1;
}

.col-sm-6 a.lab_site {
    color: white;
}

a.page-link {
    color: #3344C1;
}

/* Align the icon and text */
.center-text-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

/* Works in conjunction with .center-text-container to add another property */
.justify-sb {
    justify-content: space-between !important;
}

/* Bottom margin is removed when multiple items are displayed on a line and aligned horizontally... */
.no-bottom-margin {
    margin-bottom: 0rem !important;
}

/* ...but then the container needs to re-add the margin based on how much would have been used */
.h2-bottom-margin {
    margin-bottom: 1.5rem !important;
}

.h5-bottom-margin {
    margin-bottom: 1rem !important;
}

.two-part-title {
    margin-bottom: 0rem !important;
}

.two-part-title-div {
    display: flex;
    flex-direction: row;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 1.1rem !important;
}

.two-part-title-div-pgtitle {
    margin-top: 3rem;
}

iframe {
    width: 100%;
}

/* Used for links that should have minimal styling (regular text color and hover properties). Usually used on components we have predefined */
.a-nostyle {
    color: var(--byu-dark-gray);
}

.a-nostyle:hover {
    color: black;
    cursor: pointer;
    text-decoration: none !important;
}

.page-title {
    margin-top: 3rem;
}

.icon-right-spacing {
    padding-left: .4rem !important;
    padding-right: 0rem !important;
}

.icon-left-spacing {
    padding-left: 0rem !important;
    padding-right: .5rem !important;
}

.icon-left-margin {
    margin-left: 0rem !important;
    margin-right: .75rem !important;
}

/* These should be used on user-entered text pages (e.g., sidebar pages, basic pages, etc.), but nowhere else. */
.text-block a {
    /* color: var(--byu-royal) !important; */
    color: #3344C1 !important;
    font-weight: 500; /* Semibold */
}

.color-white {
    color: var(--byu-white) !important;
}


/* HOMEPAGE */
#info-icon {
    padding-left: .4rem;
    padding-right: 0rem !important;
    color: var(--byu-white);
}

/* SIDEBAR PAGES */
.sidebar-link {
    text-decoration: none;
    color: var(--byu-dark-gray);
    font-family: var(--ringside-headers) !important;
}

.sidebar-link:hover {
    text-decoration: none;
    color: var(--byu-dark-gray);
    font-weight: bold;
}

.sidebar-link-active {
    font-weight: bold !important;
}

.list-group-item {
    background-color: transparent !important;
    border-color: var(--byu-medium-gray) !important;
}

.no-margin ul{
    /* margin-bottom: 0; */
    list-style-type: none;
    padding-left: 0 !important;
} 


/* This is the one time when we can get rid of the left padding that comes with the default Bootstrap style */
.sidebar-list-group-item {
    padding: .75rem 0rem !important;
}


/* ACADEMICS LANDING PAGE */
.btn-link {
    color: var(--byu-dark-gray) !important;
}

.btn-link:hover {
    text-decoration: none !important;
}

/* DIRECTORY */
.col-md-6-directory {
    padding-left: 0px !important;
}

/* ----------------------------
   COMPONENTS
---------------------------- */
/* GENERAL BOOTSTRAP */
h6.text-muted {
    color: var(--byu-medium-gray) !important;
}

.component-bottom-margin {
    margin-bottom: 1rem !important;
}

.text-muted-updated {
    color: var(--byu-medium-gray) !important;
}

/* We often combine different types of content blocks on a single page. This class allows us to maintain consistent spacing between sections */
.section-bottom-margin {
    margin-bottom: 2rem !important;
}

/* ACCORDION */
.card-header-accordion {
    background-color: var(--byu-background) !important;
    border-top: 1px solid rgba(0,0,0,.125) !important;
    padding: .75rem 0rem !important;
}

#accordionParent {
    border-bottom: 1px solid rgba(0,0,0,.125) !important;
}

.accordion-body-open {
    background-color: var(--byu-background) !important;
    padding: 0rem 1.25rem 1.25rem 2rem !important;
}
.accordion-btn:focus{
    box-shadow: none !important;
}

/* BUTTONS */
.btn-primary {
    background-color: var(--byu-royal) !important;
    border-color: var(--byu-royal) !important;
    border-radius: 0rem !important;
}

.btn-primary:hover {
    background-color: #024e91 !important;
    border-color: #024e91 !important;
    border-radius: 0rem !important;
}

.btn-secondary {
    background-color: var(--byu-white) !important;
    color: var(--byu-royal) !important;
    border-color: var(--byu-royal) !important;
    border-radius: 0rem !important;
}

.btn-secondary:hover {
    background-color: #eef2f5 !important;
}

/* Some buttons need the regular background color, not white */
.btn-secondary-site-bkgrnd {
    background-color: var(--byu-background) !important;
}

.btn-download {
    padding: 1rem 1rem 1rem 1rem !important;
    background-color: var(--btn-background) !important;
    color: var(--byu-dark-gray) !important;
    max-width: 18rem !important;
    min-width: 18rem !important;
    margin-bottom: 1rem;
}

.btn-download:hover {
    background-color: var(--btn-background-hover) !important;
    color: var(--byu-dark-gray) !important;
}

.btn-card {
    margin-right: 0.5rem !important;
}

.btn-donate-text {
    color: var(--byu-white) !important;
    text-decoration: none !important;
}

.btn-donate:hover {
    box-shadow: rgb(20 20 20 / 55%) 0px 3px 5px 0px;
}

/* CARDS */
.fb-grid-wrap {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px; /* Adjust the value as desired */
  }  

.card {
    display: flex;
    border: none !important;
}

a.linked-card,
a.linked-card:hover {
    color: inherit;
    text-decoration: none;
}

.schedule-card {
    background-color: transparent !important;
    border-top: .75rem solid var(--btn-background-hover) !important; /* While not a hover property, reusing the color creates a cohesive look across the whole site  */
    border-bottom: .75rem solid var(--btn-background-hover) !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0rem !important;
    margin-bottom: 1rem;
}

.card-description-italics {
    font-weight: normal !important;
    font-style: italic !important;
}

/* DROPDOWN */
.dropdown-btn-new {
    background-color: var(--byu-background) !important;
    color: var(--byu-dark-gray) !important;
    border-color: var(--byu-dark-gray) !important;
}

.dropdown-item.active {
    background-color: var(--byu-royal) !important;
}

/* MODAL */
.modal-header {
    border-bottom: 0px !important;
}

.modal-footer {
    border-top: 0px !important;
}

.modal-body-directory {
    padding: 0rem !important;
}

/* Define the colors of the border of download buttons (depends on file type to be downloaded) */
.pdf {
    border-left: .5rem solid var(--download-btn-pdf) !important;
}

.xls {
    border-left: .5rem solid var(--download-btn-xls) !important;
}

.doc {
    border-left: .5rem solid var(--download-btn-doc) !important;
}

.btn-other {
    border-left: .5rem solid var(--byu-dark-gray) !important;
}

/* PULL QUOTE */
blockquote {
    padding: 0rem 3rem;
}

.blockquote-icon-spacing-left {
    padding-left: 0.5rem;
}


/* HERO BANNER */
.jumbotron {
    color: #fff !important;
    background-size: cover;
    border-radius: 0;
    position: relative;
    margin-bottom: 3rem !important;
}

.jumbotron > .overlay {
    background-color: var(--image-overlay);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.jumbotron > .inner-image {
    position: relative;
    z-index: 2;
    margin: auto;
}

.jumbotron-home {
    padding: 11rem 0rem !important;
}

.jumbotron-sidebarpg {
    padding: 8rem 0rem !important;
}

/* ICONS */
.fas {
    padding-right: .5rem;
    color: var(--byu-dark-gray);
}

/* QUICK LINKS */
.ql-circle-btn {
    background-color: var(--btn-background);
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    border-radius: 100%;
    text-align: center;
    margin-bottom: .75rem;
}

.ql-circle-btn:hover {
    background-color: var(--btn-background-hover);
    cursor: pointer;
}

.ql-circle-btn i {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.ql-link:hover > .ql-circle-btn {
    background-color: var(--btn-background-hover);
    cursor: pointer;
}

.ql-icon {
    padding-right: 0px;
}

.ql-linktext {
    text-align: center;
    margin-bottom: 0px !important;
}

.ql-link {
    color: var(--byu-dark-gray);
}

.ql-link:hover {
    color: black;
    text-decoration: none;
}

.ql-row {
    margin-bottom: 3rem !important;
}

.news-content-img-div {
    text-align: center;
}

/* CSS GRID FOR ICONS + TEXT */
/* Used in faculty_block.html's modal to align the icons to the left together and the text to the left together */
.icon-grid-container {
    display: grid;
    column-gap: 0.75rem;
    grid-template-columns: 1rem auto;
    margin-bottom: 1rem;
}

/* This creates spacing that mimics Bootstrap's default spacing that we overrode with CSS grid */
.icon-text-div {
    margin-top: 0;
    margin-bottom: 1rem;
}

.icon-grid-left {
    grid-column: 1;
}

.icon-grid-right {
    grid-column: 2;
    margin-top: 0;
    margin-bottom: 1rem !important;
}

#search_form {
    text-align: center;
}

#search_form_search_field {
    width: 50%;
    height: 3em;
    padding: 1em;
}

#search_form_submit_button {
    width: 15%;
    min-width: 5em;
    height: 3em;
}

#search_page_content {
    padding: 2em;
}