/**
 * Hyllkortet, shell: header, footer and the bar at the bottom. Fas 3 steg 5, planer/design/fas3-steg5/utrullning.md avsnitt 6.2.
 * Loaded on every page with the MyWineMatch template (functions.php, mwm_is_hk_page). Every rule starts with body.mwm-hk.
 * Order: mwm-hk-base.css, mwm-hk-shell.css, mwm-hk-components.css, mwm-hk-pages.css.
 *
 * The quiz button has one color everywhere: mustard with ink text.
 */

/* ---------- Structure moved from mywinematch-neve-shell.css (steg 15) ----------
   :where() keeps the old specificity, so these weigh as they did in the old file.
   The rules further down in this file win where they set the same thing. */

/* The header row: the page's side margin, and the thin line under it. */
:where(body.mwm-hk).mwm-content-page #header-grid {
  position: relative;
  color: var(--mwm-ink);
  border: 0;
}

:where(body.mwm-hk).mwm-content-page #header-grid::after {
  content: "";
  position: absolute;
  right: clamp(1.25rem, 5vw, 5.25rem);
  bottom: 0;
  left: clamp(1.25rem, 5vw, 5.25rem);
  height: 1px;
  pointer-events: none;
}

:where(body.mwm-hk).mwm-content-page #header-grid .header-main-inner {
  background: transparent;
}

:where(body.mwm-hk).mwm-content-page #header-grid .header-main .container {
  width: 100%;
  max-width: none;
  padding-inline: clamp(1.25rem, 5vw, 5.25rem);
}

:where(body.mwm-hk).mwm-content-page #header-grid .header-main .row--wrapper {
  position: relative;
}

:where(body.mwm-hk).home.mwm-content-page #header-grid .site-logo .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

:where(body.mwm-hk).mwm-content-page #header-grid .navbar-toggle {
  color: var(--mwm-ink);
  background: transparent;
  border: 1px solid #d7d0c6;
  border-radius: 10px;
}

/* Neve's own footer is not used on these pages. */
:where(body.mwm-hk).mwm-content-page #site-footer {
  display: none;
}

/* The page and its main element. */
:where(body.mwm-hk).mwm-content-page .mwm-site {
  position: relative;
  isolation: isolate;
}

:where(body.mwm-hk).mwm-content-page .mwm-site > main {
  position: relative;
  z-index: 1;
}

/* The footer layout. */
:where(body.mwm-hk) .mwm-site-footer {
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 5vw, 5.25rem) 2rem;
}

:where(body.mwm-hk) .mwm-footer-main {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  align-items: start;
  gap: 3rem;
}

:where(body.mwm-hk) .mwm-footer-wordmark {
  width: max-content;
  text-decoration: none;
}

:where(body.mwm-hk) .mwm-footer-main > p {
  max-width: 480px;
  margin: 0;
}

:where(body.mwm-hk) .mwm-footer-main nav {
  justify-self: end;
  display: grid;
}

:where(body.mwm-hk) .mwm-footer-main nav a {
  width: max-content;
}

:where(body.mwm-hk) .mwm-footer-legal {
  margin-top: 3.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid #4b4641;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

:where(body.mwm-hk) .mwm-footer-legal p {
  max-width: 560px;
  margin: 0;
}

@media (max-width: 860px) {
  :where(body.mwm-hk) .mwm-footer-main {
    grid-template-columns: 1fr;
  }

  :where(body.mwm-hk) .mwm-footer-main nav {
    justify-self: start;
  }

  :where(body.mwm-hk) .mwm-footer-legal {
    display: grid;
  }
}

@media (max-width: 620px) {
  :where(body.mwm-hk).mwm-content-page #header-grid::after {
    right: 1.25rem;
    left: 1.25rem;
  }

  :where(body.mwm-hk) .mwm-site-footer {
    padding-inline: 1.25rem;
  }
}

/* ---------- Header ---------- */

body.mwm-hk #header-grid {
  background: var(--mwm-page);
}

body.mwm-hk #header-grid::after {
  background: var(--mwm-line);
  opacity: 1;
}

body.mwm-hk #header-grid .header-main[data-show-on="desktop"] .row--wrapper::after {
  content: none;
}

body.mwm-hk #header-grid .nav-ul a {
  color: var(--mwm-ink);
  font-family: var(--mwm-font-text);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body.mwm-hk #header-grid .nav-ul.menu-desktop {
  align-items: center;
}

body.mwm-hk #header-grid .nav-ul.menu-desktop a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* The quiz in the menu: the same mustard button as on the page, smaller. */
body.mwm-hk #header-grid .nav-ul.menu-desktop a[href$="/quiz/"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  color: var(--mwm-ink);
  background: var(--mwm-mustard);
  border-radius: 4px;
  text-decoration: none;
}

body.mwm-hk #header-grid .nav-ul.menu-desktop a[href$="/quiz/"]:hover,
body.mwm-hk #header-grid .nav-ul.menu-desktop a[href$="/quiz/"]:active {
  color: var(--mwm-ink);
  background: var(--mwm-mustard-deep);
}

/* ---------- Header height and logo (utrullning.md 7.1) ---------- */

/* From 124 px to about 84 px on desktop and about 76 px on mobile. */
body.mwm-hk #header-grid .header-main-inner {
  min-height: 0;
}

body.mwm-hk #header-grid .site-logo img {
  width: auto;
  max-height: 52px;
}

/* The front page icon had an absolute address to live (neve-shell.css). The logo image stands in its place. */
body.mwm-hk.home #header-grid .site-logo .brand::before {
  content: none;
}

/* ---------- Quiz in the mobile header (utrullning.md 7.2) ---------- */

/* The link stands between the logo slot and the menu button slot (functions.php, mwm_hk_header_quiz_link). */
body.mwm-hk #header-grid .mwm-header-quiz-slot {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-right: var(--mwm-space-2);
}

body.mwm-hk #header-grid .header-main[data-show-on="mobile"] .hfg-slot.right {
  margin-left: 0;
}

body.mwm-hk #header-grid .mwm-header-quiz {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  color: var(--mwm-ink);
  background: var(--mwm-mustard);
  border-radius: var(--mwm-radius);
  font-family: var(--mwm-font-text);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}

body.mwm-hk #header-grid .mwm-header-quiz:hover,
body.mwm-hk #header-grid .mwm-header-quiz:active,
body.mwm-hk #header-grid .mwm-header-quiz:visited {
  color: var(--mwm-ink);
}

body.mwm-hk #header-grid .mwm-header-quiz:hover,
body.mwm-hk #header-grid .mwm-header-quiz:active {
  background: var(--mwm-mustard-deep);
}

body.mwm-hk #header-grid .mwm-header-quiz:focus-visible {
  outline: 3px solid var(--mwm-wine);
  outline-offset: 3px;
}

@media (max-width: 959px) {
  body.mwm-hk #header-grid .site-logo img {
    max-height: 40px;
  }
}

/* ---------- Footer (utrullning.md 7.3) ---------- */

body.mwm-hk .mwm-site-footer {
  color: #fff;
  background: var(--mwm-ink);
  font-family: var(--mwm-font-text);
  font-size: 1rem;
}

body.mwm-hk .mwm-site-footer .mwm-footer-wordmark {
  color: #fff;
  font-family: var(--mwm-font-head);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
}

body.mwm-hk .mwm-site-footer .mwm-footer-main > p {
  color: #cfc7bf;
  font-size: 1rem;
  line-height: 1.55;
}

body.mwm-hk .mwm-site-footer .mwm-footer-main nav {
  gap: var(--mwm-space-2);
  font-size: 1rem;
}

body.mwm-hk .mwm-site-footer .mwm-footer-main nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: #fff;
  border-bottom: 0;
  text-decoration: none;
}

body.mwm-hk .mwm-site-footer .mwm-footer-main nav a:hover,
body.mwm-hk .mwm-site-footer .mwm-footer-main nav a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* "Take the quiz" in mustard, 9.1:1 against ink. */
body.mwm-hk .mwm-site-footer .mwm-footer-main nav a[href$="/quiz/"] {
  color: var(--mwm-mustard);
}

body.mwm-hk .mwm-site-footer .mwm-footer-legal {
  color: #cfc7bf;
  font-size: var(--mwm-size-min);
  line-height: 1.5;
}

/* ---------- Bottom bar on mobile: the green of the band, the same mustard button ---------- */

body.mwm-hk .mwm-sticky {
  position: fixed;
  z-index: 900;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: var(--mwm-space-2);
  padding: var(--mwm-space-3) var(--mwm-space-4) calc(var(--mwm-space-3) + env(safe-area-inset-bottom));
  background: var(--mwm-bottle);
  animation: mwm-hk-sticky-in 150ms ease-out;
}

body.mwm-hk .mwm-sticky[hidden] {
  display: none;
}

body.mwm-hk .mwm-sticky .mwm-button--quiz {
  flex: 1;
  width: auto;
}

body.mwm-hk .mwm-sticky__close {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--mwm-ink);
  background: #fff;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

/* Neve's back to top button sits 30px from the bottom. Lift it above the bar while the bar shows. */
body.mwm-hk:has(.mwm-sticky:not([hidden])) #scroll-to-top {
  bottom: calc(96px + env(safe-area-inset-bottom));
}

@keyframes mwm-hk-sticky-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Cookieadmin's round button sits 15 px from the bottom left (consent.css, 0,2,2). Lift it above the bar while the bar shows.
   The plugin's script only changes display, not the position. No Cookieadmin setting is changed. */
body.mwm-hk:has(.mwm-sticky:not([hidden])) .cookieadmin_reconsent_wrap button.cookieadmin_re_consent,
body.mwm-hk:has(.mwm-sticky:not([hidden])) button.cookieadmin_re_consent {
  bottom: calc(92px + env(safe-area-inset-bottom));
}

@media (max-width: 760px) {
  body.mwm-hk:has(.mwm-sticky) .mwm-site {
    padding-bottom: 88px;
  }
}

@media (min-width: 761px) {
  body.mwm-hk .mwm-sticky {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mwm-hk .mwm-sticky,
  body.mwm-hk .faq-list summary::after {
    animation: none;
    transition: none;
  }
}