/* ─────────────────────────────────────────────────────────────────────────
 * koreanskbeauty — rung-2 design overrides (ADR-042)
 *
 * Loaded after kronika's app.css by smedja-overrides.php, in filename order.
 * Every rule below is the site's own fork, carried across because upstream
 * kronika either does not ship it at all or ships it in the shared tone.
 *
 * Derived mechanically from `git diff <last-engine-sync fce677e> HEAD --
 * wp-engine/templates/kronika/theme/assets/app.css`, with every rule whose body
 * is byte-identical to upstream dropped (it needs no override).
 *
 * TWO REWRITES were applied, both forced by upstream markup:
 *   .kr-faq__item        →  .kr-faq        (kronika's faq emits <details class="kr-faq">)
 *   .kr-faq__a p{...}    →  .kr-faq__a     (kronika renders the answer with inlineMd —
 *                                           there is NO <p> wrapper, so p-scoped rules are dead)
 *
 * DROPPED deliberately (SMED-58/66 — kronika's own CSS restores the look):
 *   .kr-rec__img
 *   the clickable-product-image selector group for roundup and rec cards
 *   .kr-rec__imglink
 *   .kr-imglink img, .kr-rec__imglink img
 *   .kr-imglink:hover img, .kr-rec__imglink:hover img
 * ───────────────────────────────────────────────────────────────────────── */


/* == mobile-nav ==
   Mobile nav overlay — a core-CSS override; upstream kronika ships none.
   NOT in the documented list — flagged. Fork commits e185e1f / fcc1c15. */
/* == Mobile nav overlay (Rosé fork) ================================== */
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  inset: 0;
  z-index: 1000 !important;
  background: var(--kr-panel) !important;
  padding: 4.5rem 1.6rem 2rem !important;
  overflow: auto !important;
  display: block !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  padding: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open ul .wp-block-navigation-item {
  border-bottom: 1px var(--kr-rule-style) var(--kr-dot) !important;
  width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
  display: block;
  width: 100%;
  font-family: var(--kr-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--kr-ink);
  text-decoration: none;
  padding: 1.05rem 0.25rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:focus-visible {
  color: var(--kr-rea);
}

.wp-block-navigation__responsive-container-close {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--kr-ink);
  background: var(--kr-panel);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.wp-block-navigation__responsive-container-close:hover { color: var(--kr-rea); }

.wp-block-navigation__responsive-container-open {
  padding: 0.6rem;
  color: var(--kr-ink);
  background: transparent;
  border: 0;
  cursor: pointer;
}

html:has(.wp-block-navigation__responsive-container.is-menu-open) {
  overflow: hidden;
}


/* == faq ==
   FAQ accordion, Rosé tone + the class rename and the missing <p>. */
/* == FAQ accordion (Rosé fork) ======================================= */
.kr-band--faq .kr-section-head { margin-bottom: 0.75rem; }

.kr-faq {
  border-bottom: 1px var(--kr-rule-style) var(--kr-dot);
}

.kr-faq:first-of-type {
  border-top: 1px var(--kr-rule-style) var(--kr-dot);
}

.kr-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  padding: 1rem 0.25rem;
  font-family: var(--kr-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--kr-ink);
  transition: color 140ms ease;
}

.kr-faq__q:hover { color: var(--kr-rea); }

/* Hide the browser's default disclosure triangle in every engine — WebKit uses
   ::-webkit-details-marker, Firefox/standard uses ::marker. Without the ::marker
   rule a stray triangle appears next to our custom +/– marker in those browsers. */
.kr-faq__q { list-style: none; }

.kr-faq__q::-webkit-details-marker { display: none; }

.kr-faq__q::marker { content: ""; }

.kr-faq__marker {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--kr-rea) 14%, var(--kr-paper));
  position: relative;
  transition: transform 180ms var(--kr-ease), background-color 140ms ease;
}

.kr-faq__marker::after { transform: rotate(90deg); transition: transform 180ms var(--kr-ease); }

.kr-faq[open] > .kr-faq__q .kr-faq__marker { background: color-mix(in srgb, var(--kr-rea) 24%, var(--kr-paper)); }

.kr-faq[open] > .kr-faq__q .kr-faq__marker::after { transform: rotate(0deg); }

.kr-faq__a {
  padding: 0 0.25rem 1.15rem;
  color: var(--kr-black);
  line-height: 1.66;
}

.kr-faq__a { margin: 0 0 0.8em; }

.kr-faq__a { margin-bottom: 0; }

.kr-faq__a a { color: var(--kr-rea); text-decoration-thickness: 1px; }


/* == compare ==
   Snabbjämförelse scan table — structure is upstream (SMED-65), tone is the site's. */
/* == Snabbjämförelse table (Rosé fork) =============================== */
.kr-compare {
  overflow-x: auto;
  margin: 0 0 2rem;
  border: 1px solid var(--kr-dot);
  border-radius: var(--kr-r-md);
  background: var(--kr-paper);
}

.kr-compare table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.kr-compare th {
  font-family: var(--kr-mono);
  font-size: 0.6563rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kr-pencil);
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--kr-dot);
  background: var(--kr-panel);
}

.kr-compare tr:last-child td { border-bottom: 0; }

.kr-compare__num {
  font-family: var(--kr-mono);
  font-weight: 700;
  color: var(--kr-grafit);
  width: 2rem;
}

.kr-compare__name { font-weight: 600; color: var(--kr-ink); }

.kr-compare__name .kr-tag { margin-left: 0.4em; font-size: 0.56rem; }

.kr-compare__link { text-align: right; white-space: nowrap; }

.kr-compare__link .kr-mlink { font-size: 0.6875rem; }


/* == jump ==
   Disclosure jump button tone (structure upstream, SMED-59). */
.kr-disclosure__jump {
  display: flex;
  justify-content: center;
  margin: 0.9rem 0 0.1rem;
}

.kr-disclosure__jump .kr-arrow {
  font-size: 0.9em;
}


/* == gift ==
   Newsletter lead magnet tone (structure upstream, SMED-65). */
/* Newsletter gift (lead magnet) */
.kr-news__gift {
  font-family: var(--kr-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--kr-rea);
  margin: 0.5rem 0 0;
}

.kr-news__giftlink {
  color: var(--kr-rea);
  font-weight: 700;
  text-decoration-thickness: 2px;
}


/* == rec-tone ==
   Redaktionens val card tone (structure upstream, SMED-66). */
/* == Recommendation cards (post "Redaktionens val" blocks) =========== */
.kr-rec {
  margin: 2.25rem 0;
  padding: 1.5rem 1.4rem 1.25rem;
  background: color-mix(in srgb, var(--kr-rea) 6%, var(--kr-paper));
  border: 1px solid color-mix(in srgb, var(--kr-rea) 18%, var(--kr-dot));
  border-radius: var(--kr-r-md);
}

.kr-rec__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: 0.8rem;
}

.kr-rec__actions .kr-btn {
  padding: 0.6em 1em;
  font-size: 0.75rem;
}

.kr-rec__read:hover { color: var(--kr-rea); }


/* == cta ==
   Masthead CTA — NOT in the documented list; flagged. */
.kr-masthead__cta {
  font-family: var(--kr-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--kr-rea);
  text-decoration: none;
  border-radius: var(--kr-r-sm);
  padding: 0.85em 1.1em;
  white-space: nowrap;
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--kr-rea) 70%, transparent);
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

.kr-masthead__cta:hover {
  background: color-mix(in srgb, var(--kr-rea) 84%, #3a2230);
  color: #fff;
}


/* == footer-legal ==
   Footer legal links — required by the fork-verbatim footer.html theme part.
   NOT in the documented list — flagged. */
/* Footer legal links */
.kr-footer__legal {
  font-family: var(--kr-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kr-pencil);
  margin: 0;
}

.kr-footer__legal a { color: var(--kr-pencil); text-decoration: none; }

.kr-footer__legal a:hover { color: var(--kr-rea); text-decoration: underline; text-underline-offset: 0.25em; }


/* == 404 ==
   Branded 404 search box — required by the EJECTED 404.html.
   NOT in the documented list — flagged. */
/* 404 search box */
.kr-404-search { margin-top: 1.6rem; max-width: 32rem; }

.kr-404-search .wp-block-search__inside-wrapper {
  border: 1px solid var(--kr-dot);
  border-radius: var(--kr-r-md);
  overflow: hidden;
  background: var(--kr-paper);
}

.kr-404-search .wp-block-search__input {
  border: 0;
  padding: 0.8rem 1rem;
  font-family: var(--kr-mono);
  font-size: 0.95rem;
  background: transparent;
  color: var(--kr-ink);
}

.kr-404-search .wp-block-search__input:focus { outline: none; }

.kr-404-search .wp-block-search__button {
  margin: 0;
  border: 0;
  background: var(--kr-rea);
  color: #fff;
  font-family: var(--kr-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.75rem;
  padding: 0 1.2rem;
  cursor: pointer;
}

.kr-404-search .wp-block-search__button:hover { background: color-mix(in srgb, var(--kr-rea) 84%, #3a2230); }