/* Site menu: same markup on every page. Links are in the HTML, the script only opens and closes. */
.sn {
  --sn-ink: #0f1f23;
  --sn-muted: #5e7176;
  --sn-line: #e8e4d6;
  --sn-brand: #1f8067;
  --sn-brand-soft: #d8f0e8;
  --sn-brand-ink: #0e3d22;
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,250,246,0.88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sn-line);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.sn *, .sn *::before, .sn *::after { box-sizing: border-box; }
.sn-inner {
  /* Same width on every page: the homepage .container (1440px, side padding clamp(24px, 2.5vw, 40px)) */
  max-width: 1440px; margin: 0 auto; padding: 0 clamp(24px, 2.5vw, 40px); height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.sn-brand {
  display: flex; align-items: center; gap: 10px; flex: none;
  text-decoration: none; color: var(--sn-ink); font-weight: 600; font-size: 15px;
}
.sn-brand img { border-radius: 8px; display: block; }
.sn a:focus-visible, .sn button:focus-visible { outline: 3px solid var(--sn-brand); outline-offset: 2px; border-radius: 8px; }

.sn-menu { display: flex; align-items: center; gap: 4px; }
.sn-link, .sn-group-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
  font: inherit; font-size: 14.5px; font-weight: 500; color: var(--sn-ink); text-decoration: none;
  background: none; border: 0; border-radius: 10px; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sn-link:hover, .sn-group-btn:hover, .sn-group.is-open .sn-group-btn { background: rgba(31,128,103,0.08); color: var(--sn-brand-ink); }
.sn-link[aria-current="page"] { color: var(--sn-brand); font-weight: 600; }
.sn-group-btn svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.sn-group.is-open .sn-group-btn svg { transform: rotate(180deg); }
.sn-cta {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; margin-left: 8px;
  font-size: 14px; font-weight: 600; color: #fff; text-decoration: none;
  background: var(--sn-ink); border-radius: 999px; transition: opacity 0.15s ease;
}
.sn-cta:hover { opacity: 0.88; }

.sn-group { position: relative; }
.sn-drop {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: 400px; padding: 8px; display: none;
  background: #fff; border: 1px solid var(--sn-line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(20,40,45,0.04), 0 16px 40px rgba(20,40,45,0.12);
}
.sn-group.is-open .sn-drop { display: block; animation: sn-in 0.16s ease-out; }
/* Invisible bridge over the gap, so the menu stays open on the way down */
.sn-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
@keyframes sn-in { from { opacity: 0; transform: translate(-50%, -4px); } to { opacity: 1; transform: translate(-50%, 0); } }
.sn-drop-label {
  display: none; padding: 8px 12px 4px; font-size: 13px; font-weight: 600; color: var(--sn-muted);
}
.sn-drop a {
  display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start;
  padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--sn-ink);
  transition: background-color 0.15s ease;
}
.sn-ico {
  width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: var(--sn-brand-soft); color: var(--sn-brand); transition: background-color 0.15s ease, color 0.15s ease;
}
.sn-ico svg { width: 20px; height: 20px; }
.sn-drop a:hover .sn-ico { background: var(--sn-brand); color: #fff; }
.sn-drop-all {
  display: flex !important; align-items: center; justify-content: space-between; gap: 8px;
  margin: 6px 4px 0; padding: 12px 10px 6px !important; border-top: 1px solid var(--sn-line); border-radius: 0 !important;
  font-size: 13.5px; font-weight: 600; color: var(--sn-brand) !important; background: none !important;
}
.sn-drop-all svg { width: 16px; height: 16px; transition: transform 0.15s ease; }
.sn-drop-all:hover svg { transform: translateX(3px); }
.sn-drop a:hover { background: rgba(31,128,103,0.07); }
.sn-drop a[aria-current="page"] { background: var(--sn-brand-soft); }
.sn-drop a[aria-current="page"] .sn-sub { color: var(--sn-brand-ink); }
.sn-drop strong { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; padding-top: 1px; color: var(--sn-ink); }
.sn-drop .sn-sub { display: block; font-size: 13px; line-height: 1.45; color: var(--sn-muted); margin-top: 2px; }

.sn-toggle {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -8px;
  background: none; border: 0; border-radius: 10px; color: var(--sn-ink); cursor: pointer;
}
.sn-toggle svg { width: 24px; height: 24px; }
.sn-toggle .sn-close { display: none; }
.sn.is-open .sn-toggle .sn-open { display: none; }
.sn.is-open .sn-toggle .sn-close { display: block; }

@media (max-width: 860px) {
  .sn-toggle { display: inline-flex; }
  .sn-menu {
    position: absolute; top: 60px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px 12px 18px; max-height: calc(100vh - 60px); overflow-y: auto;
    background: #fbfaf6; border-bottom: 1px solid var(--sn-line);
    box-shadow: 0 16px 32px rgba(20,40,45,0.10);
  }
  .sn.sn-js .sn-menu { display: none; }
  .sn.sn-js.is-open .sn-menu { display: flex; }
  .sn-link, .sn-group-btn { min-height: 48px; font-size: 16px; padding: 0 12px; width: 100%; justify-content: space-between; }
  .sn-group-btn { display: none; }
  .sn-drop { position: static; transform: none; width: auto; display: block; padding: 0 0 6px; border: 0; box-shadow: none; background: none; animation: none; }
  .sn-drop::before, .sn-drop-all { display: none !important; }
  .sn-drop a { padding: 10px 12px; }
  .sn-drop-label { display: block; padding: 12px 12px 4px; }
  .sn-cta { justify-content: center; min-height: 48px; margin: 10px 12px 0; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .sn-link, .sn-group-btn, .sn-group-btn svg, .sn-cta, .sn-drop a, .sn-ico, .sn-drop-all svg { transition: none; }
  .sn-group.is-open .sn-drop { animation: none; }
}

/* Language switcher: only on pages that have translations (printable logs). Right end of the header. */
.lsw {
  --lsw-ink: #0f1f23;
  --lsw-muted: #5e7176;
  --lsw-line: #e8e4d6;
  --lsw-brand: #1f8067;
  --lsw-brand-soft: #d8f0e8;
  --lsw-brand-ink: #0e3d22;
  position: relative; flex: none; margin-left: 8px;
}
.sn-menu { margin-left: auto; } /* keeps the menu right-aligned when the switcher follows it */
.lsw-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px;
  font: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--lsw-ink);
  background: none; border: 0; border-radius: 10px; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lsw.is-open .lsw-btn { background: rgba(31,128,103,0.08); color: var(--lsw-brand-ink); }
.lsw-btn svg { width: 14px; height: 14px; flex: none; transition: transform 0.2s ease; }
.lsw-btn .lsw-globe { width: 18px; height: 18px; color: var(--lsw-muted); transition: color 0.15s ease; }
.lsw.is-open .lsw-globe { color: var(--lsw-brand); }
@media (hover: hover) {
  /* No hover tint on touch screens: it would stick after a tap */
  .lsw-btn:hover { background: rgba(31,128,103,0.08); color: var(--lsw-brand-ink); }
  .lsw-btn:hover .lsw-globe { color: var(--lsw-brand); }
  .lsw-drop a:hover { background: rgba(31,128,103,0.07); }
}
.lsw.is-open .lsw-btn svg:last-child { transform: rotate(180deg); }
.lsw-btn:focus-visible, .lsw-drop a:focus-visible { outline: 3px solid var(--lsw-brand); outline-offset: 2px; }
.lsw-drop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 110;
  min-width: 200px; padding: 6px; display: none;
  background: #fff; border: 1px solid var(--lsw-line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(20,40,45,0.04), 0 16px 40px rgba(20,40,45,0.12);
}
.lsw.is-open .lsw-drop { display: block; animation: lsw-in 0.16s ease-out; }
/* Invisible bridge over the gap, so the list stays open on the way down */
.lsw-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
@keyframes lsw-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.lsw-drop a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 0 12px; border-radius: 10px;
  font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--lsw-ink); text-decoration: none;
  transition: background-color 0.15s ease;
}
.lsw-drop a[aria-current="page"] { background: var(--lsw-brand-soft); color: var(--lsw-brand-ink); font-weight: 600; }
.lsw-drop a svg { width: 16px; height: 16px; flex: none; color: var(--lsw-brand); }
@media (max-width: 860px) {
  /* Phone: the switcher stays in the bar, next to the menu button */
  .sn .lsw { order: 1; margin-left: auto; margin-right: 4px; }
  .sn .sn-toggle { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .lsw-btn, .lsw-btn svg, .lsw-btn .lsw-globe, .lsw-drop a { transition: none; }
  .lsw.is-open .lsw-drop { animation: none; }
}

/* World Diabetes Day 2026 banner (built by site-nav.js, 08.11–16.11.2026). Remove after 16.11.2026.
   Brand-ink green with the mint accent; text on it: #cfe6db 9.4:1, #62dc93 7.1:1, #fff 12.3:1. */
.wdd {
  /* Opens from zero height instead of pushing the page down in one jump; without animation support it is simply open */
  display: grid; grid-template-rows: 1fr;
  animation: wdd-open 0.52s cubic-bezier(0.16, 1, 0.3, 1) both;
  color: #cfe6db;
  background:
    radial-gradient(90% 260% at 0% 50%, rgba(98, 220, 147, 0.16), rgba(98, 220, 147, 0) 60%),
    #0e3d22;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 14px; line-height: 1.45;
}
.wdd.is-out { animation: wdd-close 0.32s cubic-bezier(0.7, 0, 0.84, 0) both; }
@keyframes wdd-open { from { grid-template-rows: 0fr; } to { grid-template-rows: 1fr; } }
@keyframes wdd-close { from { grid-template-rows: 1fr; } to { grid-template-rows: 0fr; } }
html[lang="ja"] .wdd { font-family: inherit; }
.wdd *, .wdd *::before, .wdd *::after { box-sizing: border-box; }
.wdd ::selection { background: #62dc93; color: #0e3d22; }
.wdd-clip { min-height: 0; overflow: hidden; }
.wdd-inner {
  position: relative;
  max-width: 1440px; min-height: 52px; margin: 0 auto;
  padding: 9px 64px 9px clamp(24px, 2.5vw, 40px);
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.wdd-icon {
  width: 28px; height: 28px; flex: none; display: block; border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 2px 6px rgba(0, 0, 0, 0.25);
}
.wdd .wdd-text {
  margin: 0; max-width: none; color: inherit; font-size: inherit; font-weight: 500; line-height: inherit;
  text-wrap: pretty;
}
.wdd .wdd-text strong { color: #fff; font-weight: 700; }
.wdd .wdd-text span { color: inherit; }
.wdd .wdd-text em { color: #62dc93; font-style: normal; font-weight: 700; white-space: nowrap; }
.wdd-stores {
  display: flex; gap: 8px; flex: none;
  margin-left: 4px; padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.wdd-stores a {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 12px;
  color: #fff; background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.005em; text-decoration: none; white-space: nowrap;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.wdd-stores a:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.28); }
.wdd-stores a:active { transform: translateY(1px); }
.wdd-stores svg { width: 14px; height: 15px; flex: none; }
/* One store (iPhone or Android): a solid button, the only action in the bar */
.wdd-stores--solo a { color: #0e3d22; background: #fff; border-color: #fff; }
.wdd-stores--solo a:hover { background: #e6f5ec; border-color: #e6f5ec; }
.wdd-close {
  position: absolute; top: 50%; right: clamp(12px, 1.5vw, 24px); transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  color: #a8cbbd; background: none; border: 0; border-radius: 10px; cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.wdd-close svg { width: 18px; height: 18px; }
.wdd-close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.wdd a:focus-visible, .wdd button:focus-visible { outline: 2px solid #62dc93; outline-offset: 2px; }
@media (max-width: 860px) {
  .wdd { background: radial-gradient(140% 120% at 0% 0%, rgba(98, 220, 147, 0.16), rgba(98, 220, 147, 0) 60%), #0e3d22; }
  .wdd-inner {
    display: grid; grid-template-columns: 32px 1fr; align-items: start; justify-content: stretch;
    gap: 10px 12px; padding: 14px 52px 14px 24px;
  }
  .wdd-icon { width: 32px; height: 32px; margin-top: 1px; }
  .wdd .wdd-text { grid-column: 2; }
  .wdd-stores { grid-column: 2; margin: 0; padding: 0; border: 0; }
  .wdd-close { top: 10px; right: 8px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wdd, .wdd.is-out { animation: none; }
  .wdd-stores a, .wdd-close { transition: none; }
}