/* Base styles for MVA Wine website */
/* This file is rendered as a Django template to support static tags */

.error {
  color: var(--error-color);
}

.banner-container {
}
.banner-container > img,
.banner-container video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
}

/* Navigation bar */
.top_nav_container {
  width: 100%;
  max-width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  background: white;
  /* Above main, which is a flex item of body and so stacks on its own z-index even though it is
     not positioned. At 1, level with main's z-index on pages that carry a login modal, the page
     painted over the header and took its clicks wherever that rule won (seen on /gift with a
     cached stylesheet). An open modal still covers it: modal_form.css lifts main above this then. */
  z-index: 2;
}

.top_nav_container nav {
  width: calc(100% - 2*var(--viewport-border));
  max-width: var(--global-max-width);
  margin-inline: 0;
  background-color: transparent;
  z-index: 1000;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 3em;
  /* The top inset carries an extra 15px over the bottom so the nav content sits lower in the bar,
     where the design places it (about 63px down rather than 48). --nav-height below adds the same
     15px so every page's content still clears the fixed header. */
  padding-block: calc(var(--nav-padding-block) + 23px) var(--nav-padding-block);
  padding-inline: var(--main-default-margin);
  transition: background-color var(--transition-speed) ease;
  border-bottom: 1px solid white;
}
.top_nav_container nav.white {
  background-color: white;
  border-bottom: 0;
  transition: background-color .6s ease;
}

nav > ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  font-family: "Sombra Variable";
  font-variation-settings: normal;
  font-weight: 300;
}

.top_nav_container nav > ul {
  /* Each side takes exactly half of whatever is left over, so the logo between them lands on
     the centre line whatever the links say. flex-grow alone could not do this: it shares out
     the free space but each side keeps its own content width on top, so the two were never
     equal and the logo sat wherever the difference put it. It drifted 25px the moment
     collections left the left side and the cart left the right.
     min-width: 0 lets a long side shrink into its half instead of shouldering the logo
     across. */
  flex: 1 1 0;
  min-width: 0;
  gap: clamp(1.125rem, 2 * var(--scale-factor), 2rem);
}
.top_nav_container nav > ul:first-of-type {
  justify-content: flex-start;
}
.top_nav_container nav > ul:last-of-type {
  justify-content: flex-end;
}

nav.top-nav a.logo {
  /* Its own width, no more. The equal siblings either side are what centre it. */
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}

nav.top-nav a.logo img {
  width: auto;
  height: var(--nav-logo-height);
}

nav a {
  font-family: "Sombra Variable";
  font-variation-settings: normal;
  font-weight: 300;
  color: var(--nav-color);
  font-size: var(--nav-font-size);
  line-height: var(--nav-line-height);
  letter-spacing: var(--nav-letter-spacing);
  white-space: nowrap;
  text-transform: lowercase;
  transition: color var(--transition-speed) ease-in-out, text-decoration-color var(--transition-speed) ease-in-out;
}

nav .nav__item--current a {
  font-weight: 400;
}

/* Hide Mobile Navigation by Default */
.mobile-nav {
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: absolute;
  top: 100%;
  right: -12px;
  width: auto;
  background: white;
  padding: 1em;
  list-style: none;
  border: 1px solid black;
  border-radius: 8px;
  gap: 2px;
  transition: opacity var(--transition-speed) ease, visibility var(--transition-speed) linear;
}

/* Hide the Hamburger Button on Desktop */
.menu-toggle {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
  min-width: unset;
  max-width: unset;
}

/* Hamburger Menu Lines */
.menu-toggle span {
    display: block;
    width: 30px;
    height: 2px;
    background: black;
}

/* Hide the Checkbox */
.mobile-nav-container {
  display: none;
}

#menu-toggle {
    display: none;
}

footer {
  width: 100%;
  padding-inline: var(--main-default-margin);
  padding-block: var(--main-default-margin) 2rem;
}
/* body is font-weight 300, and the browser resolves <strong>'s default "bolder" one step from
   there, which lands on 400: emphasis that is almost invisible against the copy around it. The
   designs set a true bold, so say so. */
strong, b {
  font-weight: 700;
}

footer nav > span {
  /* The copyright and fulfilment line sits a step smaller than the links beside it, as the
     design draws it (about 15 against the links' 17). */
  font-size: 0.9375rem;
  line-height: var(--footer-line-height);
}
footer nav > a {
  font-size: var(--footer-font-size);
  line-height: var(--footer-line-height);
  letter-spacing: 0.4px;
  color: var(--nav-color);
  /* 1ch of a 12.8px Sombra is about 7px, which is the space between two words rather than
     between two links: the row read as one run-on line. The designs leave 34 to 45px. */
  margin-right: 2.5rem;
}
footer nav > a:visited {
  color: var(--nav-color);
}
footer .footer-social {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
  margin-top: 0.75rem;
}
footer .footer-social a {
  color: var(--nav-color);
  display: flex;
  align-items: center;
  transition: opacity var(--transition-speed) ease-in-out;
}
footer .footer-social a:hover {
  opacity: 0.7;
}
footer .footer-social svg {
  /* The designs draw these at about 36px. At 20 they read as an afterthought beneath a footer
     whose type is larger than they are. */
  width: 32px;
  height: 32px;
}

main {
  padding-top: var(--main-padding-top);
  z-index: 0;
}
main.full-viewport {
  padding-top: 0;
  margin-inline: 0;
}

/* Every button on the site is the questionnaire's, which is what Arielle asked for: a black fill
   with white Sombra at its light weight, the label in the case the copy writes it, the site's
   button size, and the same padding above and below, which makes it 54 tall on a phone and 35
   on a wider screen. It replaces a transparent outline with a 2px rule, which some pages also
   lowercased and sized for themselves, so the site had three different buttons. text-transform
   is restated because several of those buttons sit inside a lowercased list. */
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #111;
  white-space: nowrap;
  width: min-content;
  height: min-content;
  font-family: "Sombra Variable";
  font-variation-settings: normal;
  font-weight: 300;
  color: #fff;
  border: 1px solid #111;
  padding: 14px 44px;
  font-size: var(--button-font-size);
  line-height: var(--button-line-height);
  letter-spacing: 0.48px;
  text-transform: none;
  text-align: center;
  cursor: pointer;
  transition: color var(--transition-speed) ease-in-out, background-color var(--transition-speed) ease-in-out;
}

a.btn {
  text-decoration: none;
  -webkit-text-decoration: none;
}
/* base.html gives links a:visited { color: inherit }, which outranks a single class, so a link
   button names its own colour for both states or a visited one goes black on black. */
a.btn:link,
a.btn:visited {
  color: #fff;
}
@media (min-width: 768px) {
  .btn { padding-block: 7px; }
}

/* On rollover it trades its colours, black on white with a black edge so it does not vanish into
   a white page, as the home page's and the questionnaire's buttons do. The !important stays so a
   page's own fill does not hide the rollover. */
a.btn:hover,
button.btn:hover {
  color: #111;
  border-color: #111;
  background: #fff !important;
  text-decoration: none;
  -webkit-text-decoration: none;
  transition: color var(--transition-speed) ease-in-out, background-color var(--transition-speed) ease-in-out;
}

#mini_cart small {
  padding-left: var(--default-gap);
}

@media (min-width:1200px) {
  body {
    margin-inline: auto;
  }
  footer nav {
    display: flex;
    justify-content: space-between;
    /* So the copyright and fulfilment line, which never breaks on a wide screen, can move whole
       onto a row of its own when it does not fit beside the links. */
    flex-wrap: wrap;
  }
}

/* The copyright and fulfilment line on one line on a wide screen, as Arielle asked: at the 13.3px
   the design sets it, measured off the mockup where the sentence runs 650px beside the links. It
   never breaks mid sentence; where the row is too narrow it moves to a row of its own instead. A
   phone still wraps it, as the phone mockup does. */
@media (min-width: 1024px) {
  footer nav > span { font-size: 0.83rem; white-space: nowrap; }
}

/* Mobile Styles */
@media (max-width: 1023px) {
/* Adjust navbar for mobile */
  nav.top-nav > ul {
    display: none;
  }
  nav.top-nav a.logo {
    justify-content: left;
    display: flex;
    justify-content: center;
  }
  nav.top-nav a.logo img {
  }
  .navbar {
      justify-content: space-between;
  }

  /* Show Hamburger and Hide Desktop Nav */
  .mobile-nav-container {
    display: flex;
    position: absolute;
    top: 28px;
    right: 28px;
    z-index: 1;
  }
  .menu-toggle {
      display: flex;
  }
  .desktop-nav {
      display: none;
  }

  /* Move logo to the left */
  .logo {
      order: 0;
  }

  /* Show Mobile Menu When Checkbox is Checked */
  #menu-toggle:checked ~ .mobile-nav {
    visibility: visible;
    opacity: 100%;
    transition: opacity var(--transition-speed) ease, visibility 0s linear;
  }
}

@media (max-width: 767px) {
  :root {
    --headline-padding-block: calc(clamp(var(--nav-padding-block), 16vw, 100px) - var(--nav-padding-block));
    --nav-font-size: clamp(1.5rem, 1.8vw, 1.875rem);
    /* Body copy stops following the nav here. --p-font-size aliases --nav-font-size, and the
       clamp above has a 1.5rem floor that 1.8vw can never reach on a phone, so every <p> on
       the site rendered at 24px: larger than some of the headings above it, and half again
       the 17px the designs set. Stated on its own so the nav keeps its own size. */
    --p-font-size: 1.0625rem;
    --button-font-size: 1.25rem;
    --info-button-font-size: 1.125rem;
  }
  body {
  }
  nav.top-nav {
    border-bottom: none;
    padding-bottom: 1em;
  }
  main {
    padding-inline: 0;
    width: 100%;
    margin-bottom: var(--main-default-margin);
  }
  /* Adjust navbar for mobile */
  nav.top-nav > ul {
    display: none;
  }
  nav.top-nav a.logo {
    justify-content: left;
    display: flex;
    justify-content: center;
  }
  nav.top-nav a.logo img {
  }
  .navbar {
      justify-content: space-between;
  }

  /* Show Hamburger and Hide Desktop Nav */
  .mobile-nav-container {
    display: flex;
    position: absolute;
    top: 28px;
    right: 28px;
    z-index: 1;
  }
  .menu-toggle {
      display: flex;
  }
  .desktop-nav {
      display: none;
  }

  /* Move logo to the left */
  .logo {
      order: 0;
  }

  /* Show Mobile Menu When Checkbox is Checked */
  #menu-toggle:checked ~ .mobile-nav {
    visibility: visible;
    opacity: 100%;
    transition: opacity var(--transition-speed) ease, visibility 0s linear;
  }
  footer {
    padding-inline: 0;
    margin-inline: 0;
    padding-block: 2rem 1rem;
  }
  footer ul li:last-of-type {
    padding-block: 2rem 0;
    text-align: left;
    line-height: var(--p-line-height);
  }
  footer nav > span {
    display: block;
    padding-top: 1em;
    line-height: 1;
  }
  /* At the larger link size the old 2.5rem between links pushed the five onto three rows. The
     design wraps them to two, four on the first row and the long "terms and conditions" onto the
     second, so the gap closes and each link stays on its own line. */
  footer nav > a {
    margin-right: 1.25rem;
    white-space: nowrap;
  }
}

@media (max-width: 375px) {
  footer nav > a {
    margin-right: 4px;
  }
}

#scroll-hint {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  opacity: 1;
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
#scroll-hint.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
}
@media (max-width: 767px) {
  #scroll-hint {
    display: none;
  }
}
body:has(.modal-form-container.open) #scroll-hint {
  display: none;
}
/* Wine heart — [heart] Loved by X members, above bottle image */
.wine-loved {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.8125rem;
  color: black;
  line-height: 1;
  letter-spacing: 0.01em;
  margin-bottom: 0.75em;
}
.wine-heart {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  transition: transform 0.15s ease;
}
.wine-heart:hover {
  transform: scale(1.2);
}
.wine-heart:active {
  transform: scale(0.95);
}
.wine-heart svg {
  fill: none;
  stroke: black;
  stroke-width: 1.5;
  transition: fill 0.2s, stroke 0.2s;
}
.wine-heart:hover svg {
  stroke: #e53935;
}
.wine-heart.liked svg {
  fill: #e53935;
  stroke: #e53935;
}
.wine-loved-text {
  white-space: nowrap;
}
.col1 .wine-loved {
  font-size: 1rem;
}
.col1 .wine-heart svg {
  width: 26px;
  height: 26px;
}
.wine-loved-text[hidden] {
  display: none;
}
ul.wine li.wine-heart-row {
  text-transform: none;
}