/* -------------------- BREAKPOINTS (site-wide reference) --------------------
   Based on Bootstrap's screen sizes. Desktop-first: write desktop styles
   normally, then use max-width queries for smaller screens.

   max-width: 1400px  →  Below large desktop monitors
   max-width: 1200px  →  Below desktop (smaller laptops)
   max-width: 992px   →  Below laptop (tablets in landscape)
   max-width: 768px   →  Mobile layout begins (tablets and below):
                          burger menu, stacked product page, 2-column store,
                          full-screen basket
   max-width: 576px   →  Phones only: carousel arrows hidden, swipe instead

   Always use these exact numbers in media queries.
   (CSS variables can't be used inside media queries, so they're listed here.)

   COLOURS: all colours are set in colours.css.
--------------------------------------------------------------------------- */

/* -------------------- BASICS -------------------- */

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
  /* Makes sure anything the JavaScript hides stays hidden, even if its CSS says display: flex */
}

body {
  margin: 0;
  background-color: var(--colour-background);
  color: var(--colour-text);
  font-family: Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
  /* Pushes the footer to the bottom on short pages */
}

/* -------------------- NAVBAR -------------------- */

header {
  background-color: var(--colour-header);
  color: var(--colour-text);
}

.navbar-container {
  max-width: 60rem;
  margin: auto;
  padding: 1.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.brand-name {
  flex-shrink: 0;
  /* Stops flexbox squeezing the logo when space is tight */
}

.brand-wordmark {
  display: block;
  height: 1.75rem;
  aspect-ratio: 1639 / 183;
  /* The wordmark's proportions, so the width follows the height and it never stretches */
  background-color: var(--colour-text);
  -webkit-mask: url("/images/sunsetslimes-wordmark.svg") center / contain no-repeat;
  mask: url("/images/sunsetslimes-wordmark.svg") center / contain no-repeat;
  /* The wordmark file works as a stencil, filled with the text colour from colours.css */
}

.menu-options {
  display: flex;
  gap: 0.75rem;
  margin: 0 auto;
  /* Equal automatic space on both sides puts the page links in the middle,
     between the logo and the basket */
}

/* The rounded page links. Their outline and shape come from ROUNDED BUTTONS below */
.nav-pill {
  padding: 0.5rem 1.25rem;
  background-color: var(--colour-nav-button);
  color: var(--colour-text);
  font-weight: bold;
  text-decoration: none;
}

.nav-pill:hover {
  background-color: var(--colour-highlight);
}

.nav-pill-featured {
  background-color: var(--colour-nav-featured);
  /* Makes Store stand out from the other links */
}

.mobile-navbar-toggle {
  display: none;
  /* Hidden on desktop */
}

.basket-toggle {
  position: relative;
  /* Lets the count badge sit on its corner */
  display: flex;
  padding: 0;
  background: none;
  border: none;
  color: var(--colour-text);
  cursor: pointer;
}

.basket-toggle svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linejoin: round;
}

.basket-count {
  position: absolute;
  top: -0.4rem;
  right: -0.6rem;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.3rem;
  border-radius: 1rem;
  background-color: var(--colour-highlight);
  color: var(--colour-text);
  font-size: 0.75rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -------------------- ROUNDED BUTTONS (shared) -------------------- */
/* The rounded "pill" shape with a dark outline, used for buttons across the whole site.
   Change the outline thickness or roundness here, once, and every button follows. */

.nav-pill,
.basket-button,
.quick-add-button,
.basket-checkout,
.action-button,
.quantity-selector,
.variant-select,
.newsletter-form {
  border: 2px solid var(--colour-outline);
  border-radius: 999px;
  /* 999px = as round as possible, whatever the button's size */
}

/* -------------------- QUANTITY SELECTOR (shared) -------------------- */
/* Used on product pages and in the basket. Its outline comes from ROUNDED BUTTONS above */

.quantity-selector {
  display: inline-flex;
  align-items: center;
  padding: 0 0.25rem;
  background-color: var(--colour-surface);
}

.quantity-selector button {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--colour-text);
  font-size: 1.25rem;
  font-weight: bold;
  cursor: pointer;
}

.quantity-input {
  width: 3rem;
  height: 2.5rem;
  border: none;
  background: none;
  color: var(--colour-text);
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  /* 1rem or more stops iPhones zooming in when it's tapped */
  -moz-appearance: textfield;
  appearance: textfield;
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  /* Hides the browser's own tiny up/down arrows, since we have − and + */
}

/* -------------------- TOAST MESSAGE (shared) -------------------- */
/* The short "Added!" pop-up at the bottom of the screen */

.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translate(-50%, 1rem);
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  background-color: var(--colour-highlight);
  color: var(--colour-text);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.toast[data-visible="true"] {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* -------------------- 769px TO 992px -------------------- */
/* Slightly smaller logo and links, so everything fits on one line */

@media (max-width: 992px) and (min-width: 769px) {
  .navbar-container {
    gap: 1rem;
  }

  .brand-wordmark {
    height: 1.4rem;
  }

  .menu-options {
    gap: 0.5rem;
  }

  .nav-pill {
    padding: 0.45rem 1rem;
  }
}

/* -------------------- MOBILE AND TABLET (768px and below) -------------------- */
/* Burger on the left, brand name in the middle, basket on the right */

@media (max-width: 768px) {
  .navbar-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* Three columns: the middle one fits the brand name, the outer two share the rest equally,
       which keeps the brand name perfectly centred */
    gap: 1rem;
  }

  .brand-name {
    margin-right: 0;
  }

  .basket-toggle {
    justify-self: end;
  }

  .mobile-navbar-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-self: start;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    z-index: 10;
    /* Keeps the burger above the slide-out menu so you can close it */
  }

  .mobile-navbar-toggle span {
    width: 25px;
    height: 3px;
    background-color: var(--colour-text);
  }

  .menu-options {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 60%;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin: 0;
    padding: 6rem 2rem;
    background-color: var(--colour-header);
    z-index: 5;
    transform: translateX(-100%);
    /* Pushes the menu off the LEFT edge, since the burger is on the left */
    transition: transform 0.3s ease;
  }

  .menu-options[data-visible="true"] {
    transform: translateX(0);
    /* Slides it back in when the JS sets data-visible to true */
  }

  .brand-wordmark {
    height: 1.25rem;
    /* A little smaller on mobile, to fit between the burger and the basket */
  }
}