/* ==========================================================================
   drkiyan.dental -- SITE CHROME (header, Treatments menu, skip link)

   2026-10-13 created for the move off Squarespace, which supplied the header
   and the mobile menu; two third-party stylesheets from ghostplugins.dev did
   the "forced mobile menu" and the side menu. All three are gone and this file
   is the replacement.

   2026-10-14 MENU C. Ten flat links did not fit on one line, so the header
   wrapped to two rows. The six service pages now sit behind a "Treatments"
   group that opens as a panel naming each one with its price; Case Studies,
   Reviews, About and Contact stay flat. All six service links remain in the
   markup of every page.

   Body face is Karla (type 1, 2026-10-14). Display face is unchanged.

   It is deliberately a SEPARATE file from shared/site.css. Tokens come from
   site.css and are not redeclared here (D41).

   No JavaScript. The mobile menu is a checkbox and a label; the Treatments
   group is a native <details>. Both work with scripting off.
   ========================================================================== */

.skip-link { position: absolute; left: -9999px; top: 0; background: #2C2220;
  color: #FDFBF7; padding: 12px 18px; z-index: 200 }
.skip-link:focus { left: 0 }

#ksh { position: sticky; top: 0; z-index: 100; background: #FDFBF7;
  border-bottom: 1px solid #E8E2DB }
#ksh .ksh-bar { position: relative; max-width: 1400px; margin: 0 auto;
  padding: 14px 40px; display: flex; align-items: center; gap: 30px }
#ksh .ksh-brand { font-family: 'Cormorant Garamond', serif; font-size: 1.32rem;
  letter-spacing: -0.4px; color: #2C2220; text-decoration: none; white-space: nowrap }
#ksh .ksh-brand span { display: block; font-family: 'Manrope', sans-serif;
  font-size: 0.62rem; font-weight: 400; letter-spacing: 0.18em;
  text-transform: uppercase; color: #7B7169; margin-top: 2px }

#ksh nav { margin-left: auto }
#ksh nav > ul { list-style: none; display: flex; align-items: center; gap: 26px }

/* a flat link and the Treatments trigger share one look */
#ksh .ksh-link, #ksh nav summary { font-family: 'Manrope', sans-serif;
  font-size: 0.74rem; font-weight: 400; letter-spacing: 0.1em;
  text-transform: uppercase; color: #4A3C31; text-decoration: none;
  display: inline-block; padding: 6px 0; white-space: nowrap;
  border-bottom: 1px solid transparent }
#ksh nav summary { cursor: pointer; list-style: none }
#ksh nav summary::-webkit-details-marker { display: none }
#ksh .ksh-link:hover, #ksh .ksh-link:focus,
#ksh nav summary:hover, #ksh nav summary:focus-visible { color: #2C2220;
  border-bottom-color: #355E3B }
#ksh .ksh-link[aria-current="page"] { color: #2C2220; border-bottom-color: #355E3B }
#ksh nav details[data-current] > summary { color: #2C2220; border-bottom-color: #355E3B }

/* chevron */
#ksh nav summary::after { content: ""; display: inline-block; width: 5px;
  height: 5px; margin-left: 9px; border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg) }
#ksh nav details[open] > summary::after { transform: translateY(1px) rotate(225deg) }

/* the Treatments panel */
#ksh .ksh-panel-body { position: absolute; top: 100%; right: 40px;
  width: min(640px, calc(100vw - 80px)); background: #FDFBF7;
  border: 1px solid #E8E2DB; box-shadow: 0 18px 44px rgba(44, 34, 32, 0.10);
  padding: 20px; z-index: 110 }
#ksh .ksh-panel-list { list-style: none; display: grid;
  grid-template-columns: 1fr 1fr; gap: 2px 20px }
#ksh .ksh-panel-list a { display: block; padding: 11px 13px;
  text-decoration: none; border-left: 1px solid transparent }
#ksh .ksh-panel-list a:hover, #ksh .ksh-panel-list a:focus {
  background: #F5F2ED; border-left-color: #355E3B }
#ksh .ksh-panel-list a[aria-current="page"] { background: #F5F2ED;
  border-left-color: #355E3B }
#ksh .ksh-panel-list b { display: block; font-family: 'Cormorant Garamond', serif;
  font-weight: 400; font-size: 1.08rem; letter-spacing: -0.2px; color: #2C2220 }

#ksh .ksh-call { font-family: 'Manrope', sans-serif; font-size: 0.78rem;
  letter-spacing: 0.06em; color: #FDFBF7; background: #355E3B; text-decoration: none;
  border: 1px solid #355E3B; padding: 10px 18px; white-space: nowrap }
#ksh .ksh-call:hover { background: #2C2220; border-color: #2C2220; color: #FDFBF7 }
#ksh .ksh-toggle, #ksh .ksh-burger { display: none }

@media (max-width: 1080px) {
  #ksh .ksh-bar { padding: 12px 20px; gap: 14px }
  #ksh .ksh-burger { display: block; margin-left: auto; width: 42px; height: 42px;
    border: 1px solid #E8E2DB; cursor: pointer; position: relative }
  #ksh .ksh-burger::before, #ksh .ksh-burger::after,
  #ksh .ksh-burger i { content: ""; position: absolute; left: 11px; right: 11px;
    height: 1px; background: #2C2220; display: block }
  #ksh .ksh-burger::before { top: 14px }
  #ksh .ksh-burger i { top: 20px }
  #ksh .ksh-burger::after { top: 26px }
  #ksh nav { position: absolute; top: 100%; left: 0; right: 0;
    background: #FDFBF7; border-bottom: 1px solid #E8E2DB; margin: 0;
    max-height: 0; overflow: hidden; transition: max-height .22s ease }
  #ksh nav > ul { flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px 20px 18px }
  #ksh .ksh-link { display: block; padding: 13px 0; font-size: 0.82rem;
    border-bottom: 1px solid #E8E2DB }
  #ksh nav summary { display: block; padding: 13px 0; font-size: 0.82rem;
    border-bottom: 1px solid #E8E2DB }
  #ksh nav summary::after { float: right; margin: 6px 2px 0 0 }
  /* in the drawer the panel flows inline; it must not float over the page */
  #ksh .ksh-panel-body { position: static; width: auto; border: 0;
    box-shadow: none; padding: 4px 0 10px; background: transparent }
  #ksh .ksh-panel-list { grid-template-columns: 1fr; gap: 0 }
  #ksh .ksh-panel-list a { padding: 11px 0 11px 14px;
    border-left: 1px solid #E8E2DB }
  #ksh .ksh-panel-list b { font-size: 1.12rem }
  #ksh .ksh-toggle:checked ~ nav { max-height: 86vh; overflow-y: auto }
  #ksh .ksh-call { display: none }
}
@media (prefers-reduced-motion: reduce) {
  #ksh nav { transition: none }
}

/* the language menu (D105, 2026-10-22): one column, narrow */
#ksh .ksh-lang .ksh-panel-body { width: 230px }
#ksh .ksh-lang .ksh-panel-list { grid-template-columns: 1fr }
@media (max-width: 1080px) {
  #ksh .ksh-lang .ksh-panel-body { width: auto }
}

/* the patient's own words under a translated review, and the English text
   under a translated legal page (Kiyan, 2026-10-22) */
.rv-orig { font-size: 12px; line-height: 1.7; color: var(--taupe); margin-top: -8px }
.rv-orig-label { font-weight: 600; color: var(--cognac); margin-inline-end: 6px }
.i18n-orig-doc { background: var(--alabaster); border-top: 1px solid var(--linen);
  padding: 56px 0 72px; font-size: 13px; line-height: 1.75; color: var(--taupe) }
.i18n-orig-doc p, .i18n-orig-doc li { font-size: 13px; margin: 0 0 8px }
.i18n-orig-doc ul, .i18n-orig-doc ol { padding-left: 20px; margin: 0 0 10px }
.i18n-orig-doc .i18n-orig-label { font-weight: 600; color: var(--cognac); margin-bottom: 18px }
.i18n-orig-doc .i18n-orig-h { font-weight: 600; color: var(--walnut); margin: 18px 0 6px }