/* ============================================================================
   Dofek AI - local landing page additions
   Only what the live Tailwind bundle does not already ship: the mobile nav
   panel and the Contact page form / channel list. Same palette, same
   square-cornered, bordered, mono-labelled language as the rest of the site.
   ========================================================================== */

:root{
  --dk-ink:#1b1b1b;
  --dk-black:#000;
  --dk-muted:#4c4546;
  --dk-accent:#7d562d;
  --dk-tan:#d6a676;
  --dk-paper:#f9f9f9;
  --dk-panel:#fff;
  --dk-warm:#f4f1ea;
  --dk-line:rgba(27,27,27,.10);
  --dk-line-2:rgba(27,27,27,.20);
  --dk-danger:#ba1a1a;
  --dk-headline:"Hanken Grotesk",sans-serif;
  --dk-bodyf:"Source Sans 3",sans-serif;
  --dk-mono:"JetBrains Mono",monospace;
}

/* ------------------------------------------------ mobile navigation panel */
.dk-mobile-menu{display:none;border-top:1px solid var(--dk-line);background:var(--dk-paper)}
.dk-mobile-menu.dk-open{display:block}
/* the panel is in use right up to the nav-collapse breakpoint (1180px) */
@media (min-width:1180px){.dk-mobile-menu,.dk-mobile-menu.dk-open{display:none}}
.dk-mobile-menu a{
  font-family:var(--dk-mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--dk-muted);padding:.85rem 0;border-bottom:1px solid var(--dk-line);transition:color .2s;
}
.dk-mobile-menu a:last-child{border-bottom:0}
.dk-mobile-menu a:hover{color:var(--dk-accent)}
.dk-mobile-menu a.dk-mm-cta{color:var(--dk-black);font-weight:700}

/* ============================================ PER-CARD HOVER: ORGAN CARDS */
/* The Talor Organ cards get a pointer cursor and their own hover colour:
       1PO -> blue        2PO -> red        3PO -> dark green
   Everything below is driven by four variables per card, so recolouring a
   card means editing one line. --dk-hov-rgb is the same colour as plain
   "r,g,b" numbers, used for the translucent glow and wash.
   This file loads after the site bundle, so these win over the bundle's own
   warm hover colours without that file being touched. */

.dk-hov-1{                                   /* 1PO - blue                 */
  --dk-hov:#2563eb; --dk-hov-deep:#1d4ed8; --dk-hov-wash:#f5f9ff; --dk-hov-rgb:37,99,235;
}
.dk-hov-2{                                   /* 2PO - red                  */
  --dk-hov:#ba1a1a; --dk-hov-deep:#8f1414; --dk-hov-wash:#fef6f6; --dk-hov-rgb:186,26,26;
}
.dk-hov-3{                                   /* 3PO - dark green           */
  --dk-hov:#1f6b3f; --dk-hov-deep:#14502e; --dk-hov-wash:#f2faf5; --dk-hov-rgb:31,107,63;
}

.dk-hover-card{
  cursor:pointer;
  transition:border-color .2s,background .2s,box-shadow .2s,transform .2s;
}

.dk-hover-card:hover{
  border-color:var(--dk-hov);
  background:var(--dk-hov-wash);
  box-shadow:0 0 0 2px rgba(var(--dk-hov-rgb),.22), 0 16px 34px -22px rgba(var(--dk-hov-rgb),.85);
  transform:translateY(-2px);
}

/* header strip, icon and title follow the border into that card's colour */
.dk-hover-card:hover > div > div:first-child{
  border-bottom-color:rgba(var(--dk-hov-rgb),.30);
  background:rgba(var(--dk-hov-rgb),.07);
}
.dk-hover-card:hover .material-symbols-outlined{color:var(--dk-hov)}
.dk-hover-card:hover .font-headline{color:var(--dk-hov-deep)}
.dk-hover-card:hover img{filter:none}          /* drop the grayscale on hover */

/* the Inspect ... Dynamics button fills with the same colour */
.dk-hover-card:hover .dk-hover-btn{background:var(--dk-hov);color:#fff;border-color:var(--dk-hov)}
.dk-hover-btn{cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.dk-hover-card:hover .dk-hover-btn:hover{background:var(--dk-hov-deep);border-color:var(--dk-hov-deep);color:#fff}

/* keyboard users get the same cue */
.dk-hover-card:focus-within{
  border-color:var(--dk-hov);
  box-shadow:0 0 0 2px rgba(var(--dk-hov-rgb),.22);
}

/* ------------------------------------------- contact split (form / links) */
/* The live bundle only ships the column classes the live page uses, so the
   7-5 split is defined here rather than with Tailwind utilities. */
.dk-split{display:grid;grid-template-columns:1fr}
@media (min-width:1024px){.dk-split{grid-template-columns:7fr 5fr}}

/* ================================================= NAV: EVERYTHING ON ONE LINE */
/* The wordmark and the section links must never wrap to a second line, so
   each is set to nowrap and the row is given a tighter, width-aware gap.
   Below 1500px the optional "Protocol Calculator" button steps aside to make
   room; below 1180px the whole row is replaced by the hamburger menu. */

nav .font-headline{white-space:nowrap}                     /* Dofek AI wordmark  */
@media (max-width:420px){nav a > .font-headline{font-size:1.3rem}}
nav .hidden.md\:flex.items-center.gap-8 > a{white-space:nowrap}   /* section links */
.dk-nav-contact{white-space:nowrap}

@media (min-width:1180px){
  nav .hidden.md\:flex.items-center.gap-8{gap:1.25rem;padding-left:1.5rem;padding-right:.75rem}
}
@media (min-width:1400px){
  nav .hidden.md\:flex.items-center.gap-8{gap:2rem;padding-left:2.5rem;padding-right:1.5rem}
}

/* the Protocol Calculator button only appears when there is room for it */
@media (max-width:1499px){ .dk-nav-calc{display:none !important} }

/* Below 1180px the one-line row cannot fit, so the whole thing collapses into
   the hamburger menu (which carries every link, Contact Us included) instead
   of wrapping. The site bundle switches at 768px; this raises that point. */
@media (max-width:1179px){
  nav .hidden.md\:flex.items-center.gap-8{display:none !important}   /* section links */
  nav a.hidden.md\:flex{display:none !important}                     /* Access Lab    */
  #dk-menu-btn{display:inline-flex !important}                       /* hamburger     */
}

/* ================================================================= FORM == */
.dk-form{display:flex;flex-direction:column;gap:1.75rem}
.dk-field{display:flex;flex-direction:column}

.dk-label{
  font-family:var(--dk-mono);font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dk-black);margin-bottom:.6rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.dk-req{font-weight:500;letter-spacing:.12em;color:var(--dk-accent);text-transform:uppercase;font-size:10px}

.dk-input{
  width:100%;box-sizing:border-box;
  font-family:var(--dk-bodyf);font-size:1rem;color:var(--dk-ink);
  background:var(--dk-paper);border:1px solid var(--dk-line-2);border-radius:0;
  padding:.9rem 1rem;transition:border-color .2s,background .2s,box-shadow .2s;
}
.dk-input::placeholder{color:#9a9394}
.dk-input:hover{border-color:rgba(27,27,27,.35)}
.dk-input:focus{outline:0;border-color:var(--dk-black);background:#fff;box-shadow:0 0 0 3px rgba(214,166,118,.35)}
.dk-textarea{resize:vertical;min-height:9.5rem;line-height:1.65}

.dk-input.dk-invalid{border-color:var(--dk-danger);background:#fdf4f4}
.dk-input.dk-invalid:focus{box-shadow:0 0 0 3px rgba(186,26,26,.18)}
.dk-input.dk-valid{border-color:#2f7d5b}

/* word counter -------------------------------------------------------- */
.dk-meter-row{display:flex;align-items:center;gap:.85rem;margin-top:.6rem}
.dk-meter{flex:1;height:4px;background:#eee;border:1px solid var(--dk-line);position:relative}
.dk-meter-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--dk-accent);transition:width .18s ease,background .18s ease}
.dk-meter-fill.dk-over{background:var(--dk-danger)}
.dk-count{font-family:var(--dk-mono);font-size:11px;letter-spacing:.08em;color:var(--dk-muted);white-space:nowrap}
.dk-count.dk-over{color:var(--dk-danger);font-weight:700}

/* errors -------------------------------------------------------------- */
.dk-err{
  font-family:var(--dk-mono);font-size:11px;letter-spacing:.05em;color:var(--dk-danger);
  margin-top:.55rem;display:flex;align-items:center;gap:.4rem;
}
.dk-err::before{content:"!";display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border:1px solid var(--dk-danger);font-weight:700;flex:0 0 auto}
.dk-err-block{border:1px solid rgba(186,26,26,.35);background:#fdf4f4;padding:.7rem .85rem;margin-top:0}
.dk-err[hidden]{display:none}

/* actions ------------------------------------------------------------- */
.dk-actions{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
@media (min-width:640px){.dk-actions{flex-direction:row;align-items:center;gap:1.5rem}}
.dk-note{font-family:var(--dk-bodyf);font-size:.8rem;color:var(--dk-muted);line-height:1.5;max-width:24rem}
#dk-send[disabled]{opacity:.55;cursor:not-allowed}
#dk-send[disabled]:hover{background:var(--dk-black);color:#fff}

/* honeypot ------------------------------------------------------------ */
.dk-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* thank-you state ----------------------------------------------------- */
.dk-thanks{border:1px solid var(--dk-line-2);background:var(--dk-warm);padding:2.5rem 2rem;text-align:left}
.dk-thanks[hidden]{display:none}
.dk-thanks-icon{
  width:56px;height:56px;border:1px solid var(--dk-accent);background:#fff;color:var(--dk-accent);
  display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;
}
#dk-again{cursor:pointer}

/* ============================================================== CHANNELS */
.dk-channels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.dk-channel{
  display:flex;align-items:center;gap:.9rem;
  background:#fff;border:1px solid var(--dk-line);padding:.7rem .85rem;
  text-decoration:none;transition:border-color .2s,background .2s,transform .2s;
}
.dk-channel:hover{border-color:var(--dk-accent);background:rgba(214,166,118,.10)}
.dk-channel-ic{width:38px;height:38px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.dk-channel-ic svg{width:100%;height:100%;transition:transform .2s}
.dk-channel:hover .dk-channel-ic svg{transform:scale(1.08)}
.dk-ic-mail{background:var(--dk-black);color:#fff;padding:8px}
.dk-ic-mail svg{width:100%;height:100%}
.dk-channel-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.dk-channel-txt strong{font-family:var(--dk-headline);font-size:1rem;font-weight:700;color:var(--dk-black);line-height:1.25}
.dk-channel-txt em{font-family:var(--dk-mono);font-style:normal;font-size:11px;color:var(--dk-muted);letter-spacing:.04em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-channel-tag{
  font-family:var(--dk-mono);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dk-accent);border:1px solid rgba(125,86,45,.35);padding:.25rem .45rem;flex:0 0 auto;
}

.dk-panel{margin-top:1.75rem;border:1px solid var(--dk-line);background:#fff;padding:1.1rem}

/* keep long content from ever pushing the page sideways ---------------- */
body{overflow-x:hidden}