/* ── Tablio shared top nav (identical on every page) ───────────────────────
   Scoped under #tablio-nav so it overrides any page's legacy nav rules.
   Injected by /assets/nav.js; language picker handled by /assets/i18n.js. */

#tablio-nav {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; gap: 18px;
  height: 74px; padding: 0 4%;
  background: rgba(251,246,241,.94);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid rgba(var(--brand-rgb, 142,55,48),.12);
  box-shadow: 0 2px 20px rgba(var(--brand-rgb, 142,55,48),.06);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
#tablio-nav a { text-decoration: none; color: inherit; }

/* Logo (far left; pushes everything else right) */
#tablio-nav .tn-logo { display: flex; align-items: center; gap: 10px; margin-right: auto; }
#tablio-nav .tn-logo img { height: 44px; width: auto; display: block; border-radius: 11px; }
#tablio-nav .tn-logo span { font-family: 'Nunito', system-ui, sans-serif; font-weight: 900; font-size: 20px; color: var(--text, #241310); }

/* Center links — absolutely centered so they never drift with the sides */
#tablio-nav .tn-links {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0;
}
#tablio-nav .tn-links a { font-size: 15px; font-weight: 600; color: var(--muted, #7C635C); transition: color .2s; }
#tablio-nav .tn-links a:hover, #tablio-nav .tn-links a.active { color: var(--brand, #8E3730); }
#tablio-nav .tn-cta {
  background: linear-gradient(135deg, var(--brand, #8E3730), var(--brand2, #A8423A));
  color: #fff !important; padding: 9px 18px; border-radius: 10px;
  font-weight: 800; box-shadow: 0 4px 16px rgba(var(--brand-rgb, 142,55,48),.35);
  transition: transform .2s, box-shadow .2s;
}
#tablio-nav .tn-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(var(--brand-rgb, 142,55,48),.5); color: #fff !important; }

/* "Tablio Business" — bordered button in the brand color, with briefcase icon */
#tablio-nav .tn-biz {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid var(--brand, #8E3730); color: var(--brand, #8E3730) !important;
  padding: 8px 16px; border-radius: 10px; font-weight: 800;
  transition: background .2s, box-shadow .2s;
}
#tablio-nav .tn-biz:hover { background: rgba(var(--brand-rgb, 142,55,48),.08); color: var(--brand, #8E3730) !important; box-shadow: 0 4px 14px rgba(var(--brand-rgb, 142,55,48),.2); }
#tablio-nav .tn-biz-ico { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }

/* Right cluster — Sign In / Sign Up / globe language switch */
#tablio-nav .tn-right { display: flex; align-items: center; gap: 14px; }
#tablio-nav .tn-signin { font-size: 15px; font-weight: 700; color: var(--text, #241310); transition: color .2s; }
#tablio-nav .tn-signin:hover { color: var(--brand, #8E3730); }
#tablio-nav .tn-signup {
  font-size: 15px; font-weight: 800; color: var(--brand, #8E3730);
  border: 1.5px solid rgba(var(--brand-rgb, 142,55,48),.4); padding: 8px 16px; border-radius: 10px;
  transition: background .2s, border-color .2s;
}
#tablio-nav .tn-signup:hover { background: rgba(var(--brand-rgb, 142,55,48),.08); border-color: rgba(var(--brand-rgb, 142,55,48),.6); }

/* Items shown only inside the mobile dropdown */
#tablio-nav .tn-only-mobile { display: none; }

/* Hamburger */
#tablio-nav .tn-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
#tablio-nav .tn-burger span { width: 24px; height: 2px; background: var(--text, #241310); border-radius: 2px; transition: transform .2s, opacity .2s; }

@media (max-width: 980px) {
  #tablio-nav .tn-links {
    position: fixed; top: 74px; left: 0; right: 0; transform: none;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg, #FBF6F1); border-bottom: 1px solid rgba(var(--brand-rgb, 142,55,48),.18);
    box-shadow: 0 16px 40px rgba(0,0,0,.16); padding: 6px 0 14px; max-height: calc(100vh - 74px); overflow-y: auto;
  }
  #tablio-nav.tn-open .tn-links { display: flex; }
  #tablio-nav .tn-links li { width: 100%; }
  #tablio-nav .tn-links a { display: block; padding: 15px 24px; font-size: 16px; font-weight: 600; color: var(--text, #241310); border-bottom: 1px solid rgba(var(--brand-rgb, 142,55,48),.07); }
  #tablio-nav .tn-links a.tn-cta { margin: 12px 24px 4px; padding: 14px; text-align: center; border-radius: 12px; }
  #tablio-nav .tn-biz { border: none; border-radius: 0; padding: 15px 24px; justify-content: flex-start; }
  #tablio-nav .tn-only-mobile { display: block; }
  #tablio-nav .tn-right .tn-signin, #tablio-nav .tn-right .tn-signup { display: none; }
  #tablio-nav .tn-burger { display: flex; }
}