/* ==========================================================
   VARIABLES GLOBALES
========================================================== */
:root {
  --color-primary: #19664a;
  --color-primary-dark: #003d32;
  --color-primary-light: #04734b;

  --color-accent-red: #a50000;
  --color-accent-yellow: #f8e000;

  --color-footer-bg: #034525;
  --color-footer-dark: #112621;
  --color-footer-accent: #006414;
  --color-footer-social: #619e44;

  --color-text-main: #f9fce8;
  --color-text-secondary: #FBFADA;

  --font-main: "Pencil", Quicksand, sans-serif;
  --font-size-base: 16px;
}

/* ==========================================================
   STRUCTURE GLOBALE
========================================================== */
.grid-x {
  position: relative;
}

main {
  padding-bottom: 2.4rem;
  font-family: var(--font-main);
  font-size: var(--font-size-base);
  font-weight: 500;
}

main section:not(.hero-section) {
  padding: 4rem 0;
}

/* ==========================================================
   HEADER
========================================================== */
.main-header {
  background-color: var(--color-accent-yellow);
}

.main-header .promotions-link {
  background-color: var(--color-accent-red);
}

.main-header .promotions-link a {
  color: #fff;
}

/* ==========================================================
   NAVIGATION
========================================================== */
#global-nav {
  position: relative;
  background-color: var(--color-primary);
  background-image: linear-gradient(
    92.41deg,
    var(--color-primary-dark),
    var(--color-primary-light)
  );
}

#global-nav::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto 0;
  height: 2px;
  background-image: linear-gradient(
    to right,
    #E9185F 20%,
    #6F2F51 20% 40%,
    yellow 40% 60%,
    #7EAB9B 60% 80%,
    blue 80%
  );
}

/* ==========================================================
   FOOTER
========================================================== */
footer {
  position: relative;
  color: var(--color-text-main);
  background-color: var(--color-footer-bg);

  --font-main-color: var(--color-text-main);
  --font-secondary-color: var(--color-text-secondary);
}

footer::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 20px);
  width: 100%;
  height: 4px;
  background-color: var(--color-footer-accent);
  box-shadow:
    0 8px 0 red,
    0 16px 0 yellow;
}

/* Liens */
footer a {
  color: var(--color-text-main);
  transition: color 0.2s ease;
}

footer a:hover {
  color: #91db00;
}

/* ==========================================================
   FOOTER — SECTIONS
========================================================== */
footer .social-section {
  background-color: var(--color-footer-social);
  color: var(--font-secondary-color);
}

footer .origin-section {
  background-color: var(--color-footer-dark);
  color: #c5a065;
}

footer .copyright-section,
footer .copyright-section a {
  color: var(--font-secondary-color);
}

/* ==========================================================
   FOOTER — DÉCORATIONS
========================================================== */
footer section.origin-section .grid-container::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: calc(100% - 164px);
  width: 320px;
  height: 580px;
  background: url("../images/static/tropical-banana-leaf.png") no-repeat
              bottom center / contain;
}

footer section.social-section .grid-x::after {
  content: "";
  position: absolute;
  bottom: 100%;
  width: 100%;
  height: 150px;
  background: url("../images/static/banana-leaves-top-corner.png") no-repeat
              center right / contain;
}

/* ==========================================================
   ACCESSIBILITÉ
========================================================== */
#accessibility {
  color: #fff;
  background-color: var(--color-footer-accent);
  box-shadow:
    0 0 0 1px #91db00,
    0 -39px 0 #659d32;
}

/* ==========================================================
   DIVERS
========================================================== */
footer section:nth-of-type(3) .grid-x {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}