/* DEFAULT STYLES */

body {
  background-color: #fcf9f4;
  overflow-x: hidden;
}

p {
  font-family: "poppins", sans-serif;
  font-size: 18px;
}

li {
  font-size: 18px;
}

:root {
  --bs-primary: #9a8058;
  --bs-secondary: #51381f;
  --bs-tertiary: #efc739;
  --bs-info: #79634c;
  --bs-dark: #0d0a19;
  --bs-white: #fcf9f4;
  --bs-light: #e9decf;
}

.font-text {
  font-family: "poppins", sans-serif;
}

.font-heading {
  font-family: "cooper-black-std", serif;
}

.text-primary {
  color: var(--bs-primary) !important;
}

.text-secondary {
  color: var(--bs-secondary) !important;
}

.text-tertiary {
  color: var(--bs-tertiary) !important;
}

.text-dark {
  color: var(--bs-dark) !important;
}

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

.text-info {
  color: var(--bs-info) !important;
}

.bg-primary {
  background-color: var(--bs-primary) !important;
}

.bg-secondary {
  background-color: var(--bs-secondary) !important;
}

.bg-white {
  background-color: var(--bs-white) !important;
}

.bg-light {
  background-color: var(--bs-light) !important;
}

.min-h-270 {
  min-height: 270px;
}

.letter-spacing-10 {
  letter-spacing: 3.2px;
}

.fs-7 {
  font-size: 18px;
}

a[href^="tel:"] {
  color: #fcf9f4 !important;
  text-decoration: underline;
}

/* NAVIGATION STYLES */
.navbar {
  transition: transform 0.4s ease, background-color 1s ease;
}

.navbar a {
  font-size: 20px;
}

.logo-navbar img {
  width: 70px;
  height: auto;
}

@media (min-width: 992px) {
  .logo-navbar img {
    width: 90px;
  }
}

.not-home-navbar {
  background-color: #51381f !important;
}

.navbar.scrolled {
  background-color: #51381f !important;
}

.navbar-hidden {
  transform: translateY(-100%);
  transition: transform 0.4s ease;
}

.navbar-nav {
  --bs-nav-link-padding-y: 0.2rem;
}

.nav-link {
  color: var(--bs-white);
  border-bottom: 2px solid transparent;
}

.nav-link.active {
  color: var(--bs-tertiary) !important;
  border-bottom: 2px solid var(--bs-tertiary);
}

.nav-link:hover:not(.active) {
  color: var(--bs-tertiary) !important;
  border-bottom: 2px solid var(--bs-tertiary);
}

.navbar-toggler {
  border: none;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.btn-white,
.btn-white:focus,
.btn-white:active,
.btn-white:visited,
.btn-white:hover {
  background-color: var(--bs-white) !important;
  color: var(--bs-secondary) !important;
}

@media (max-width: 991.98px) {
  .navbar {
    background-color: #51381f !important;
  }
}

/* Home page - Hero section */
.hero {
  background: url("../img/turkey_home_hero.jpg") no-repeat center center;
  background-size: cover;
  position: relative;
  height: 100vh;
  color: var(--bs-white);
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
}

.hero > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 767.98px) {
  .hero {
    background-position: 25% center;
  }
}

.skew-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 160px;
  background: var(--bs-white);
  clip-path: polygon(0 0, 50% 100%, 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}

.btn-outline-light {
  border-width: 2px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.btn-outline-light:hover {
  background-color: var(--bs-tertiary);
  color: var(--bs-secondary);
  border-color: var(--bs-tertiary);
}

/* Home page - Why Choose Maryfield Turkeys Section */
.shadow {
  box-shadow: 4px 4px 4.4px 1px rgba(0, 0, 0, 0.25) !important;
}

.w-card-responsive {
  width: 85%;
}

@media (min-width: 992px) {
  .w-card-responsive {
    width: 100%;
  }
}

/* Home page - Deeside Banner Section */
.deeside-banner {
  background: url("../img/deeside_banner.jpg") no-repeat center center;
  background-size: cover;
  height: 500px;
  position: relative;
  padding: 0;
}

.deeside-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 0;
}

.deeside-banner > * {
  position: relative;
  z-index: 1;
}

.deeside-banner p {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Home page - How to Order Section */
.btn-outline-brown {
  border-width: 2px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-color: var(--bs-secondary);
  color: var(--bs-secondary);
}

.btn-outline-brown:hover {
  background-color: var(--bs-tertiary);
  color: var(--bs-secondary);
  border-color: var(--bs-tertiary);
}

/* Home page - Promo Section */
.promo-banner {
  background: linear-gradient(
    180deg,
    #9a8058 0%,
    #866c48 32.5%,
    #6a5032 62%,
    #51381f 100%
  );
}

/* Where to Buy page - Local Farm Shops and Butchers Section */
.responsive-map {
  width: 100%;
  height: 450px;
}

/* Our Turkey page - Divider styles */
/* SKEW CLOCKWISE */
.skew-c {
  width: 100%;
  height: 100px;
  position: absolute;
  left: 0px;
  background: linear-gradient(to right bottom, #9a8058 49%, #fcf9f4 50%);
}
/* SKEW COUNTER CLOCKWISE */
.skew-cc {
  width: 100%;
  height: 100px;
  position: absolute;
  left: 0px;
  background: linear-gradient(to left bottom, #fcf9f4 49%, #9a8058 50%);
}

/* SKEW COUNTER CLOCKWISE - TRASNPARENT */
.skew-cc-transparent {
  width: 100%;
  height: 100px;
  position: absolute;
  left: 0;
  background: linear-gradient(to left bottom, #fcf9f4 49%, transparent 50%);
}

/* SKEW CLOCKWISE - TRANSPARENT */
.skew-c-transparent {
  width: 100%;
  height: 100px;
  position: absolute;
  left: 0;
  background: linear-gradient(to right bottom, transparent 49%, #fcf9f4 50%);
}

#our_turkeys {
  background: url("../img/turkeys-background.jpg") no-repeat center center;
  background-attachment: scroll;
}

@media (min-width: 992px) {
  #our_turkeys {
    background-attachment: fixed;
    background-size: cover;
  }
}

/* Our Turkey page - Product Card styles */
.promo-box-img {
  min-height: 200px;
  max-height: 350px;
  width: auto;
}

/* Contact Us page - Form styles */
.form-control:focus,
.form-select:valid:focus {
  border: 2px solid #51381f;
  box-shadow: 0 0 5px #51381f;
}

.form-control::placeholder {
  font-style: italic;
  color: var(--bs-info);
}

.btn-submit {
  letter-spacing: 0.5px;
  background-color: var(--bs-secondary);
}

.btn-submit:hover {
  background-color: var(--bs-tertiary);
  color: var(--bs-secondary);
  border-color: var(--bs-tertiary);
}

/* Contact Us page - FAQ styles */
.accordion-button {
  color: #fcf9f4;
  background-color: #9a8058;
}

.accordion-button:not(.collapsed) {
  color: #fcf9f4;
  background-color: #9a8058;
}

.accordion {
  --bs-accordion-color: #51381f;
  --bs-accordion-bg: #e9decf;
}

.accordion-button:focus {
  outline: none;
  box-shadow: none;
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FCF9F4' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FCF9F4' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  transform: rotate(-180deg);
}

/* Recipes Page - Hero section */
.hero-recipes {
  background: url("../img/roasted_turkey_promo.jpg") no-repeat center center;
  background-size: cover;
  position: relative;
  height: 55vh;
  color: var(--bs-white);
}

.tips-bg {
  min-height: 250px;
  max-height: 300px;
}

.text-darker p {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
/* Recipes Page - Boxing Day section */
.turkey-tracks {
  position: absolute;
  right: 0;
  top: 0;
  margin: 2rem 5rem 2rem 0;
  height: 100%;
  max-width: 350px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.9;
}

/* 404 Page Styles */
.turkey-404 {
  height: 35vh;
}