/* ===========================================================================
   Mekozza · the desktop navigation bar

   Every route into this site used to be behind one ellipsis icon in the
   top-right corner of the header. On a 1920px screen, with room to spare,
   a visitor had to find that icon, click it, and read an eighteen-item list
   before discovering that Mekozza does dog walking, runs an emergency vet
   line, or has an AI assistant at all.

   DESKTOP AND HOME PAGE ONLY. Every rule below 992px is a single
   `display: none`, and everything else sits inside the media query, so the
   phone layout cannot be reached by any of it — the mobile home page has its
   own bottom tab bar and does not want a second navigation.

   Prefixed .mkn. Not .mkd: home-desktop.css already owns that on this page,
   and details.css owns it on the pet profile. Three files sharing one prefix
   is how a rule written for one page quietly restyles another.
   =========================================================================== */

/* Below 992px this does not exist. First rule in the file, so nothing can
   turn it on by accident further down. */
.mkn{ display:none }

@media (min-width:992px){

.mkn{
  --ink:#101828; --ink-2:#475467; --ink-3:#98a2b3;
  --line:#eaecf0; --line-2:#d0d5dd;
  --bg:#fbfcfe; --card:#fff;
  --brand:#ff6b35; --brand-2:#ff9350; --brand-soft:#fff2ec; --brand-deep:#e14f14;
  --gold:#b98900; --gold-soft:#fff8e6;
  --ok:#067647; --ok-soft:#ecfdf3;
  --bad:#b42318; --bad-soft:#fef3f2;
  --shadow-l:0 24px 60px -18px rgba(16,24,40,.28);
  --r:16px;

  display:block;
  position:relative;
  z-index:900;              /* under the sticky header (10000), over the page */
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  margin:14px auto 0;
  max-width:1320px;
  padding:0 20px;
}

@media (prefers-color-scheme:dark){
  .mkn:not([data-theme="light"]){
    --ink:#f2f4f7; --ink-2:#98a2b3; --ink-3:#667085;
    --line:#1f2937; --line-2:#344054;
    --bg:#0b0f19; --card:#131a29;
    --brand-soft:#2a1710; --gold-soft:#2a2110; --ok-soft:#0d2018; --bad-soft:#2a1211;
    --shadow-l:0 24px 60px -18px rgba(0,0,0,.6);
  }
}

.mkn *,.mkn *::before,.mkn *::after{ box-sizing:border-box }
.mkn b,.mkn small,.mkn em,.mkn p,.mkn span{ margin:0 }

/* --- the bar ------------------------------------------------------------- */
.mkn-bar{
  display:flex; align-items:center; gap:14px;
  padding:7px 10px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 2px 10px -4px rgba(16,24,40,.10);
}

.mkn-row{
  display:flex; align-items:center; gap:2px;
  list-style:none; margin:0; padding:0;
}
.mkn-row > li{ position:relative }

.mkn-top{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 13px; border:0; border-radius:11px;
  background:none; color:var(--ink-2);
  font:inherit; font-size:13.5px; font-weight:700;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .14s ease, color .14s ease;
}
.mkn-top > i:first-child{ font-size:13px; color:var(--ink-3); transition:color .14s ease }
.mkn-top:hover,
.mkn-has.is-open > .mkn-top{ background:var(--brand-soft); color:var(--brand-deep) }
.mkn-top:hover > i:first-child,
.mkn-has.is-open > .mkn-top > i:first-child{ color:var(--brand) }

.mkn-caret{ font-size:9px; color:var(--ink-3); transition:transform .18s ease }
.mkn-has.is-open .mkn-caret{ transform:rotate(180deg) }

/* Ask AI wears its own colour, because it is the thing people do not expect
   a pet site to have and will not look for. */
.mkn-ai em{
  font-style:normal; padding:2px 7px; border-radius:99px;
  background:linear-gradient(135deg,#a78bfa,#7c3aed); color:#fff;
  font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.mkn-ai:hover{ background:#f5f3ff; color:#6d28d9 }
.mkn-ai:hover > i:first-child{ color:#7c3aed }

/* --- the right-hand end -------------------------------------------------- */
.mkn-end{ margin-left:auto; display:flex; align-items:center; gap:9px }

.mkn-partner{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 13px; border-radius:11px;
  border:1px solid var(--line-2); color:var(--ink-2);
  font-size:12.5px; font-weight:700; text-decoration:none; white-space:nowrap;
  transition:border-color .14s ease, color .14s ease;
}
.mkn-partner:hover{ border-color:var(--brand); color:var(--brand-deep) }

.mkn-sos{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 15px; border-radius:11px;
  background:linear-gradient(135deg,#ff5a4d,#e03127); color:#fff;
  font-size:12.5px; font-weight:800; text-decoration:none; white-space:nowrap;
  box-shadow:0 8px 20px -8px rgba(224,49,39,.75);
}
.mkn-sos:hover{ box-shadow:0 12px 26px -8px rgba(224,49,39,.9) }
.mkn-sos-dot{
  width:7px; height:7px; border-radius:50%; background:#fff;
  animation:mkn-pulse 1.6s ease-in-out infinite;
}
@keyframes mkn-pulse{
  0%,100%{ opacity:1; transform:scale(1) }
  50%    { opacity:.45; transform:scale(.72) }
}
@media (prefers-reduced-motion:reduce){
  .mkn-sos-dot{ animation:none }
}

/* --- the panels ---------------------------------------------------------- */
.mkn-panel{
  position:absolute; top:calc(100% + 9px); left:0;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
  z-index:5;
}
.mkn-has.is-open > .mkn-panel{ opacity:1; visibility:visible; transform:none }

/* A pointer travelling from the button to the panel crosses a 9px gap. This
   bridges it so `mouseleave` does not fire in between. */
.mkn-panel::before{
  content:''; position:absolute; left:0; right:0; top:-11px; height:11px;
}

.mkn-panel-in{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow-l);
  padding:18px;
}

/* Keep a wide panel inside the page rather than off the right edge. */
.mkn-row > li:nth-last-child(-n+3) .mkn-panel{ left:auto; right:0 }

/* --- pets ---------------------------------------------------------------- */
.mkn-panel--pets .mkn-panel-in{
  display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:18px;
  width:760px;
}
/* align-content:start, or the six rows stretch to fill whatever height the
   side column happens to be — the promo panel there is pushed to the bottom
   with margin-top:auto, which made the categories drift apart down a tall,
   half-empty column. */
.mkn-cats{
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
  align-content:start;
}

.mkn-cat{
  display:flex; align-items:center; gap:11px;
  padding:9px; border-radius:13px;
  text-decoration:none; color:var(--ink);
  transition:background .14s ease;
}
.mkn-cat:hover{ background:var(--brand-soft) }
.mkn-cat-pic{
  flex:0 0 42px; width:42px; height:42px; border-radius:11px;
  overflow:hidden; background:var(--line);
  display:grid; place-items:center; color:var(--ink-3);
}
.mkn-cat-pic img{ width:100%; height:100%; object-fit:cover; display:block }
.mkn-cat-txt{ min-width:0 }
.mkn-cat-txt b{ display:block; font-size:13.5px; font-weight:800; line-height:1.25 }
.mkn-cat-txt small{ display:block; margin-top:2px; font-size:11.5px; color:var(--ink-3) }
.mkn-go{ margin-left:auto; font-size:10px; color:var(--line-2); transition:color .14s ease }
.mkn-cat:hover .mkn-go{ color:var(--brand) }

.mkn-side{
  display:flex; flex-direction:column; gap:3px;
  padding-left:18px; border-left:1px solid var(--line);
}
.mkn-side-h{
  font-size:10px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:6px;
}
.mkn-side > a{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:10px;
  color:var(--ink-2); font-size:12.5px; font-weight:600; text-decoration:none;
  transition:background .14s ease, color .14s ease;
}
.mkn-side > a i{ width:14px; font-size:12px; color:var(--ink-3); text-align:center }
.mkn-side > a:hover{ background:var(--brand-soft); color:var(--brand-deep) }
.mkn-side > a:hover i{ color:var(--brand) }

.mkn-promo{
  margin-top:auto; padding:14px; border-radius:14px; color:#fff;
  background:
    radial-gradient(360px 150px at 12% -40%, rgba(255,147,80,.36), transparent 62%),
    linear-gradient(135deg,#1a2336,#111827 58%,#0b0f19);
}
.mkn-promo > i{ color:#ffd28a; font-size:13px }
.mkn-promo b{ display:block; margin-top:7px; font-size:12.5px; font-weight:800 }
.mkn-promo p{ margin-top:5px; font-size:11.5px; line-height:1.55; color:rgba(255,255,255,.7) }
.mkn-promo-go{
  display:inline-block; margin-top:10px; padding:7px 12px; border-radius:9px;
  background:linear-gradient(135deg,var(--brand-2),var(--brand)); color:#fff;
  font-size:11.5px; font-weight:800; text-decoration:none;
}

/* --- services ------------------------------------------------------------ */
.mkn-panel--svc .mkn-panel-in{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;
  width:1000px;
}
.mkn-grp{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.mkn-grp-h{
  font-size:10px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); padding:0 8px; margin-bottom:5px;
}
.mkn-svc{
  display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px;
  align-items:start;
  padding:9px 8px; border-radius:12px;
  text-decoration:none; color:var(--ink);
  transition:background .14s ease;
}
.mkn-svc:hover{ background:var(--brand-soft) }
.mkn-svc-ic{
  flex:0 0 30px; width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand); font-size:12px;
}
.mkn-svc.is-live .mkn-svc-ic{ background:var(--bad-soft); color:var(--bad) }
.mkn-svc-txt{ min-width:0; flex:1 }
.mkn-svc-txt b{
  display:flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:800; line-height:1.3;
}
.mkn-svc-txt b em{
  font-style:normal; padding:1px 6px; border-radius:99px;
  background:var(--bad-soft); color:var(--bad);
  font-size:8.5px; font-weight:800; letter-spacing:.06em;
}
.mkn-svc-txt small{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; margin-top:2px;
  font-size:11px; line-height:1.45; color:var(--ink-3);
}
.mkn-svc-px{
  display:inline-block; margin-top:5px;
  font-size:11px; font-weight:800; color:var(--ok);
  background:var(--ok-soft); padding:3px 7px; border-radius:7px; white-space:nowrap;
}

.mkn-panel-foot{
  grid-column:1 / -1;
  display:flex; align-items:center; gap:12px;
  margin-top:4px; padding-top:14px; border-top:1px solid var(--line);
}
.mkn-panel-foot > a{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 13px; border-radius:10px;
  background:var(--brand-soft); color:var(--brand-deep);
  font-size:12.5px; font-weight:800; text-decoration:none;
}
.mkn-panel-foot > a:hover{ background:#ffe4d6 }
.mkn-panel-foot .sp{ flex:1 }
.mkn-note{ font-size:11.5px; font-weight:600; color:var(--ink-3) }
.mkn-note i{ color:var(--ok); margin-right:5px }

/* --- account ------------------------------------------------------------- */
.mkn-panel--you .mkn-panel-in{
  display:flex; flex-direction:column; gap:2px; width:290px; padding:12px;
}
.mkn-panel--you a{
  display:grid; grid-template-columns:26px 1fr; grid-auto-rows:auto;
  column-gap:10px; align-items:center;
  padding:9px 10px; border-radius:11px;
  text-decoration:none; color:var(--ink);
  transition:background .14s ease;
}
.mkn-panel--you a:hover{ background:var(--brand-soft) }
.mkn-panel--you a i{ grid-row:1 / span 2; font-size:13px; color:var(--ink-3); text-align:center }
.mkn-panel--you a:hover i{ color:var(--brand) }
.mkn-panel--you a b{ font-size:13px; font-weight:700 }
.mkn-panel--you a small{ font-size:11px; color:var(--ink-3); line-height:1.4 }
.mkn-panel--you a.mkn-out{
  margin-top:6px; padding-top:12px; border-top:1px solid var(--line);
  border-radius:0 0 11px 11px;
}
.mkn-panel--you a.mkn-out:hover{ background:var(--bad-soft) }
.mkn-panel--you a.mkn-out:hover i,
.mkn-panel--you a.mkn-out:hover b{ color:var(--bad) }

/* --- focus --------------------------------------------------------------- */
.mkn a:focus-visible,
.mkn button:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px;
}

}   /* end @media (min-width: 992px) */