/**
 * Hyllkortet, base: fonts, tokens and elements. 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.
 *
 * Fonts: Zilla Slab and Public Sans from github.com/google/fonts,
 * SIL Open Font License 1.1. See ../fonts/OFL-ZillaSlab.txt and ../fonts/OFL-PublicSans.txt.
 *
 * One set of tokens, --mwm-*, set on body.mwm-hk. The old stylesheets and their tokens were removed in steg 15.
 * Rules with :where(body.mwm-hk) first were moved from the old files and keep their old specificity.
 * Focus ring: wine on white, white on the green band, the green bar and the dark footer.
 */

/* ---------- Moved from mywinematch-global.css (steg 15). The page column inside Neve ----------
   :where() keeps the old specificity. */

:where(body.mwm-hk) .mwm-site {
  width: 100%;
  max-width: none;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(body.mwm-hk) .mwm-site *,
:where(body.mwm-hk) .mwm-site *::before,
:where(body.mwm-hk) .mwm-site *::after {
  box-sizing: border-box;
}

:where(body.mwm-hk) .mwm-site img {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(body.mwm-hk).page-template-template-mywinematch-fullwidth .container.single-page-container,
:where(body.mwm-hk).page-template-template-mywinematch-fullwidth .nv-single-page-wrap,
:where(body.mwm-hk).page-template-template-mywinematch-fullwidth .nv-content-wrap,
:where(body.mwm-hk).page-template-template-mywinematch-fullwidth .entry-content {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

:where(body.mwm-hk).page-template-template-mywinematch-fullwidth .nv-page-title-wrap,
:where(body.mwm-hk).page-template-template-mywinematch-fullwidth .entry-title {
  display: none;
}

:where(body.mwm-hk) .mwm-site .hero {
  direction: ltr;
}

:where(body.mwm-hk) .mwm-screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Element defaults moved from mywinematch-components.css (steg 15) ----------
   :where() keeps the old specificity, so these rules weigh exactly as they did in the old file. */

:where(body.mwm-hk) * {
  box-sizing: border-box;
}

html:has(> body.mwm-hk) {
  scroll-behavior: smooth;
}

body:where(.mwm-hk) {
  margin: 0;
  color: var(--mwm-ink);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(body.mwm-hk) a {
  color: inherit;
  text-decoration: none;
}

:where(body.mwm-hk) button,
:where(body.mwm-hk) input {
  font: inherit;
}

:where(body.mwm-hk) button,
:where(body.mwm-hk) a {
  -webkit-tap-highlight-color: transparent;
}

:where(body.mwm-hk) h1,
:where(body.mwm-hk) h2 {
  font-family: var(--mwm-font-head);
  font-weight: 400;
  text-wrap: balance;
}

:where(body.mwm-hk) img {
  max-width: 100%;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  html:has(> body.mwm-hk) {
    scroll-behavior: auto;
  }

  :where(body.mwm-hk) * {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Fonts ---------- */

@font-face {
  font-family: "Zilla Slab";
  src: url("../fonts/zilla-slab-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-400-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Fallbacks with matched metrics, computed from the font files against Georgia Bold and Arial
   (letter widths weighted by English letter frequency, vertical metrics). Keeps the layout steady while the fonts load. */
@font-face {
  font-family: "Zilla Slab Fallback";
  src: local("Georgia Bold"), local("Georgia-Bold");
  font-weight: 700;
  font-style: normal;
  size-adjust: 85.96%;
  ascent-override: 109.82%;
  descent-override: 29.78%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Public Sans Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400;
  font-style: normal;
  size-adjust: 105.6%;
  ascent-override: 89.96%;
  descent-override: 21.31%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Public Sans Fallback";
  src: local("Arial Italic"), local("Arial-ItalicMT");
  font-weight: 400;
  font-style: italic;
  size-adjust: 102.19%;
  ascent-override: 92.96%;
  descent-override: 22.02%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Public Sans Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600;
  font-style: normal;
  size-adjust: 98.74%;
  ascent-override: 96.21%;
  descent-override: 22.79%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */

body.mwm-hk {
  --mwm-page: #ffffff;
  --mwm-ink: #211d1a;
  --mwm-ink-soft: #6b6259;
  --mwm-wine: #571c30;
  --mwm-wine-deep: #421424;
  --mwm-bottle: #1e4a3a;
  --mwm-mustard: #e8b931;
  --mwm-mustard-deep: #d9a61a;
  --mwm-leaf: #e3ece6;
  --mwm-line: #e5dfd4;
  --mwm-control: #958b7f;
  /* Fas 3 steg 6, Första glaset: grape skin, a pale tone of red wine in the glass. Only on the quiz boxes and the
     front page story. Ink 14.65:1, soft ink 5.23:1, wine 11.40:1, bottle 8.78:1. The control edge is 2.93:1,
     so no unfilled button or field may stand on it. */
  --mwm-grape: #f6eeef;

  --mwm-font-head: "Zilla Slab", "Zilla Slab Fallback", Rockwell, Georgia, serif;
  --mwm-font-text: "Public Sans", "Public Sans Fallback", Arial, sans-serif;

  /* Linear between 390 and 1440 px. H1 38 to 60, H2 29 to 36, body 17 to 18. */
  --mwm-size-h1: clamp(2.375rem, 1.8643rem + 2.0952vw, 3.75rem);
  --mwm-size-h2: clamp(1.8125rem, 1.65rem + 0.6667vw, 2.25rem);
  --mwm-size-h3: clamp(1.25rem, 1.1804rem + 0.2857vw, 1.4375rem);
  --mwm-size-body: clamp(1.0625rem, 1.0393rem + 0.0952vw, 1.125rem);
  --mwm-size-small: 0.9375rem;
  --mwm-size-min: 0.875rem;

  --mwm-wide: 1120px;
  --mwm-column: 760px;
  --mwm-measure: 62ch;
  --mwm-gutter: 20px;
  /* Fas 3 steg 6: body text leading and the air before an H2. */
  --mwm-leading: 1.75;
  --mwm-space-h2: 72px;

  --mwm-space-1: 4px;
  --mwm-space-2: 8px;
  --mwm-space-3: 12px;
  --mwm-space-4: 16px;
  --mwm-space-5: 24px;
  --mwm-space-6: 32px;
  --mwm-space-7: 48px;
  --mwm-space-8: 64px;

  --mwm-radius: 4px;
  --mwm-radius-media: 6px;
  --page-x: clamp(1.25rem, 5vw, 5.25rem);

}

@media (min-width: 761px) {
  body.mwm-hk {
    --mwm-gutter: var(--page-x);
    --mwm-space-h2: 96px;
  }
}

/* ---------- Page ground: no paper, no frame ---------- */

body.mwm-hk {
  background: var(--mwm-page);
  background-image: none;
  font-family: var(--mwm-font-text);
}

body.mwm-hk::before {
  display: none;
}

body.mwm-hk .mwm-site {
  color: var(--mwm-ink);
  background: var(--mwm-page);
  background-image: none;
  font-family: var(--mwm-font-text);
  font-size: var(--mwm-size-body);
  line-height: var(--mwm-leading);
}

body.mwm-hk:not(.home) .mwm-site::before {
  content: none;
}

body.mwm-hk .mwm-site strong,
body.mwm-hk .mwm-site b {
  font-weight: 600;
}

body.mwm-hk .mwm-site em {
  font-style: italic;
  font-weight: 400;
}

/* ---------- Focus: at least 3:1 against every ground ---------- */

body.mwm-hk a:focus-visible,
body.mwm-hk button:focus-visible,
body.mwm-hk summary:focus-visible,
body.mwm-hk .mwm-site a:focus-visible,
body.mwm-hk .mwm-site button:focus-visible,
body.mwm-hk .mwm-site summary:focus-visible,
body.mwm-hk .comparison-table-wrap:focus-visible {
  outline: 3px solid var(--mwm-wine);
  outline-offset: 3px;
}

/* Wine on bottle green is 1.3:1 and wine on the ink footer is 1.3:1. White is 10.0:1 and 16.7:1. */
body.mwm-hk .mwm-site .mwm-hk-band a:focus-visible,
body.mwm-hk .mwm-sticky a:focus-visible,
body.mwm-hk .mwm-sticky button:focus-visible,
body.mwm-hk .mwm-site-footer a:focus-visible,
body.mwm-hk .mwm-site .mwm-site-footer a:focus-visible {
  outline-color: #fff;
}

/* ---------- Text ---------- */

body.mwm-hk .article-content p,
body.mwm-hk .article-content li {
  max-width: var(--mwm-measure);
  margin: 0 0 1em;
  text-wrap: pretty;
}

/* Fas 3 steg 6: 1.25em between paragraphs. List items keep 1em. */
body.mwm-hk .article-content p {
  margin-bottom: 1.25em;
}

body.mwm-hk .article-content h2 {
  margin: 0 0 var(--mwm-space-4);
  color: var(--mwm-bottle);
  font-family: var(--mwm-font-head);
  font-size: var(--mwm-size-h2);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.12;
  text-transform: none;
  text-wrap: balance;
}

body.mwm-hk .article-content h3 {
  color: var(--mwm-ink);
  font-family: var(--mwm-font-head);
  font-size: var(--mwm-size-h3);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}

body.mwm-hk .article-content p:not(.article-cta):not(.article-signature) a:not(.secondary-button) {
  color: var(--mwm-wine);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

body.mwm-hk .article-content p:not(.article-cta):not(.article-signature) a:not(.secondary-button):visited {
  color: var(--mwm-wine);
}

body.mwm-hk .article-content p:not(.article-cta):not(.article-signature) a:not(.secondary-button):hover,
body.mwm-hk .article-content p:not(.article-cta):not(.article-signature) a:not(.secondary-button):focus-visible {
  text-decoration-thickness: 2px;
}

/* The note after the comparison table has opacity in the page content. */
body.mwm-hk .article-content > section > p[style*="opacity"] {
  color: var(--mwm-ink-soft);
  font-size: var(--mwm-size-small) !important;
  line-height: 1.5;
  opacity: 1 !important;
}

body.mwm-hk .article-content .article-disclaimer {
  margin-top: var(--mwm-space-6);
  color: var(--mwm-ink-soft);
  font-size: var(--mwm-size-small);
  line-height: 1.5;
}

body.mwm-hk .article-content .article-signature {
  margin-top: var(--mwm-space-6);
}