/* ============================================================
   NATURIS ORGANIC BREADS — site.css
   Brand colours:
     Green     #527334
     Burgundy  #a31d45
     Brown     #87322b
     Yellow    #ffcb05
   ============================================================ */

/* ---------- Web Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');

@font-face {
    font-family: 'LemonMilk';
    src: url('../fonts/LemonMilk.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'LemonMilk';
    src: url('../fonts/LemonMilkitalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'LemonMilk';
    src: url('../fonts/LemonMilklight.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'LemonMilk';
    src: url('../fonts/LemonMilklightitalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'LemonMilk';
    src: url('../fonts/LemonMilkbold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'LemonMilk';
    src: url('../fonts/LemonMilkbolditalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
}

/* ---------- Base ---------- */
html, body {
    height: 100%;
    background-color: #f4eee4;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'LemonMilk', sans-serif;
}

/* Apply LemonMilk to navbar links */
.navbar-nav > li > a,
.navbar-nav > li > .dropdown-toggle {
    font-family: 'LemonMilk', sans-serif;
    font-weight: 300;
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

.wrap > .container {
    padding: 70px 15px 20px;
}

/* ---------- Footer ---------- */
.footer {
    width: 100%;
    margin-top: 20px;
    background-color: #87322b;
}

.footer img {
    width: 100%;
}

/* ---------- Jumbotron ---------- */
.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

/* ---------- Misc ---------- */
.not-set {
    color: #c55;
    font-style: italic;
}

/* Gridview sort icons */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: "Glyphicons Halflings";
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}
a.asc:after  { content: "\e151"; }
a.desc:after { content: "\e152"; }
.sort-numerical a.asc:after  { content: "\e153"; }
.sort-numerical a.desc:after { content: "\e154"; }
.sort-ordinal a.asc:after    { content: "\e155"; }
.sort-ordinal a.desc:after   { content: "\e156"; }

.grid-view th { white-space: nowrap; }

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* ---------- Header image ---------- */
.header-image {
    margin-top: 100px;
}

.header-image img {
    width: 100%;
    max-height: 35rem;
    object-fit: cover;
}

@media (max-width: 767px) {
    .header-image {
        margin-top: 80px;
    }
    .header-image img {
        width: 100%;
    }
}

/* ============================================================
   NAVIGATION
   ============================================================ */

/* Logout button */
.nav li > form > button.logout {
    padding: 8px;
    border: none;
    color: #527334;
    font-weight: 900;
    font-size: x-large;
    font-family: 'LemonMilk', sans-serif;
}

@media (max-width: 767px) {
    .nav li > form > button.logout {
        display: block;
        text-align: left;
        width: 100%;
        padding: 10px 15px;
    }
    .navbar-inverse .navbar-brand img {
        height: 80px;
        width: auto;
    }
    .navbar-brand {
        height: 100%;
    }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
    color: #a31d45;
}

.nav > li > form > button.logout:focus {
    outline: none;
}

/* Active nav item */
.navbar-inverse .navbar-nav > .active > a {
    color: #a31d45 !important;
    background-color: transparent;
}
.navbar-inverse .navbar-nav > .active > a:hover {
    color: #a31d45;
    background-color: transparent;
}
.navbar-inverse ul.navbar-nav > li > a:hover {
    color: #a31d45;
    background-color: transparent;
}

/* Mobile toggle */
.navbar-inverse .navbar-toggle {
    background-color: #527334;
    border-color: #527334;
}
.navbar-inverse .navbar-toggle:hover {
    background-color: #a31d45;
    border-color: #a31d45;
}

.navbar-collapse {
    border-top: 0px;
}

.container > .navbar-header {
    background-color: transparent;
}

/* Right-side nav links */
.nav.navbar-nav.navbar-right li a {
    color: #527334;
    font-family: 'LemonMilk', sans-serif;
}

.navbar {
    border: 0px;
}

.navbar-nav {
    margin-top: 10px;
}

.navbar-header {
    margin-top: 0px;
}

.navbar-nav > li > a {
    font-size: large;
    font-weight: 600;
    font-family: 'LemonMilk', sans-serif;
}

@media (max-width: 767px) {
    .navbar {
        min-height: 15px;
    }
}

.navbar-fixed-top {
    background-color: #f4eee4;
    transition: background-color 2s ease 0s;
    padding-bottom: 10px;
}

.navbar-fixed-top.opaque {
    background-color: rgba(255, 255, 255, 0);
    transition: background-color 2s ease 0s;
}

/* Logo sizing in navbar */
.navbar-brand img {
    height: 80px;
    width: auto;
}

/* ============================================================
   SELECTION BUTTONS
   ============================================================ */
.selection-button {
    margin-bottom: 50px;
}

.selection-button a {
    padding: 25px;
    padding-right: 40px;
    padding-left: 40px;
    background-color: #eaeaea;
    margin: 0px;
    margin-right: -4px;
    font-size: 20px;
    font-family: 'LemonMilk', sans-serif;
}

.selection-button li {
    padding-top: 25px;
    padding-left: 0px;
    padding-right: 0px;
    margin: 0px;
}

.selection-button a:hover {
    color: #87322b;
    background-color: white;
}

.selection-button a {
    text-decoration: none;
}

.border-right {
    border-right: 1px solid black;
}

#previous-view {
    display: none;
}

/* ============================================================
   CAROUSEL
   ============================================================ */
.carousel {
    max-width: 1135px;
    margin-bottom: 30px;
    margin-top: 30px;
}

.carousel-caption {
    z-index: 10;
}

.carousel .item {
    width: 100%;
    background-color: #777;
}

.carousel-inner > .item > img {
    width: 100% !important;
    max-height: 350px;
}

@media (max-width: 767px) {
    .carousel {
        margin-bottom: 10px;
        margin-top: 10px;
    }
    .carousel-inner > .item > img {
        max-height: 100px;
    }
    .carousel-indicators,
    .carousel-indicators li {
        cursor: default;
        pointer-events: none;
    }
    .carousel-indicators {
        bottom: auto;
        top: 85%;
    }
}

.right.carousel-control,
.left.carousel-control {
    display: none;
}

/* ============================================================
   MISC COMPONENTS
   ============================================================ */
.btn-sq-lg {
    width: 150px !important;
    font-weight: 700;
    font-size: large;
    font-family: 'LemonMilk', sans-serif;
}

.client-selection-images img {
    margin-bottom: 20px;
}

.footer-bottom {
    padding: 20px;
}

.email-link {
    font-weight: 700;
    font-size: large;
}

.email-link a {
    color: #527334;
}

.email-link a:hover {
    text-decoration: none;
    color: #a31d45;
}

.email-link span {
    color: #ffcb05;
}

@media (max-width: 767px) {
    .email-link {
        font-size: small;
    }
}

.alert-message {
    font-size: larger;
}

/* ============================================================
   PRODUCT CARDS — use DM Sans instead of LemonMilk
   ============================================================ */

/* Product name headings in the cart/order product cards */
.product-header h5 {
    font-family: 'LemonMilk', sans-serif;
    font-weight: 450;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ---------- Bootstrap primary colour overrides ---------- */
.btn-primary {
    background-color: #527334;
    border-color: #3d5626;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #a31d45;
    border-color: #7d1535;
}

.btn-success {
    background-color: #527334;
    border-color: #3d5626;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: #3d5626;
    border-color: #2e4019;
}