/*
 * Shared header for every tejas.rulydata.com page.
 *
 * This deliberately mirrors the rulydata.com header (components/Nav.tsx in the
 * rulydata-website repo): same logo, same links in the same order, same type,
 * spacing and 1080px mobile breakpoint, so moving between the two hosts does not
 * look like moving between two companies. The only differences are on the right:
 * signed in, the Sign in / Try Tejas free pair is replaced by an account menu.
 * If you change the links or the look here, change Nav.tsx too (and vice versa).
 *
 * Inter is self-hosted because the CSP only allows font-src 'self'.
 */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter/inter-400.woff) format("woff")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter/inter-500.woff) format("woff")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter/inter-600.woff) format("woff")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/inter/inter-700.woff) format("woff")}

.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid #e5e7eb;color:#1a1d30;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5}
.site-header [hidden]{display:none!important}
.site-header-inner{position:relative;display:flex;align-items:center;gap:32px;width:min(100% - 48px,1152px);height:68px;margin:0 auto}
.site-brand-link{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.site-brand-logo{display:block;width:auto;height:48px}

/* Main links: identical to rulydata.com's .nav-link */
.site-header .site-navigation{display:flex;align-items:center;gap:16px;margin:0 0 0 16px;padding:0}
.site-header .site-navigation a{padding:8px 14px;border-radius:8px;color:#6b7280;font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;transition:color .15s,background .15s}
.site-header .site-navigation a:hover,.site-header .site-navigation a:focus-visible{background:#f9fafb;color:#1a1d30}
/* "You are in Tejas": the product you are using is marked, nothing else changes */
.site-header .site-navigation a.site-nav-current{color:#6b35e8}
.site-nav-tag{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;background:#ecfdf5;color:#047857;font-size:11px;font-weight:600;letter-spacing:.02em;line-height:1.5;vertical-align:1px}
.site-header .site-navigation .site-nav-mobile{display:none}

/* Right-hand actions */
.site-header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.site-header .site-sign-in-link{padding:8px 14px;border-radius:8px;color:#6b7280;font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;transition:color .15s,background .15s}
.site-header .site-sign-in-link:hover,.site-header .site-sign-in-link:focus-visible{background:#f9fafb;color:#1a1d30}
.site-header .site-start-link{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;border-radius:10px;background:#6b35e8;color:#fff;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .15s,transform .1s}
.site-header .site-start-link:hover,.site-header .site-start-link:focus-visible{background:#4f1fb8;color:#fff;transform:translateY(-1px)}

/* Page styles give bare <button>s margins, fills and colours; reset them here. */
.site-header button{margin:0;font:inherit;line-height:1.5;cursor:pointer}

/* Account menu (signed in) */
.site-account{position:relative}
.site-header .site-account-toggle{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 5px;border:1px solid #e5e7eb;border-radius:999px;background:#fff;color:#1a1d30;font-size:14px;font-weight:500}
.site-header .site-account-toggle:hover,.site-header .site-account-toggle:focus-visible,.site-header .site-account-toggle[aria-expanded="true"]{background:#f9fafb}
.site-account-avatar{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#f3eeff;color:#6b35e8;font-size:13px;font-weight:600}
.site-account-toggle::after{content:"";width:6px;height:6px;margin:-3px 0 0 2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.site-account-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:35;display:flex;flex-direction:column;width:min(280px,calc(100vw - 32px));padding:8px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:0 12px 32px rgba(16,24,40,.14)}
.site-header .site-account-menu a,.site-header .site-account-menu button{display:block;width:100%;padding:10px;border:0;border-radius:7px;background:transparent;color:#344054;font-size:14px;font-weight:500;text-align:left;text-decoration:none}
.site-header .site-account-menu a:hover,.site-header .site-account-menu a:focus-visible,.site-header .site-account-menu button:hover,.site-header .site-account-menu button:focus-visible{background:#f9fafb;color:#1a1d30}
.site-header .site-account-menu .site-logout-btn{margin-top:4px;color:#9b2525}
.site-menu-identity{margin:0 0 4px;padding:6px 10px 10px;border-bottom:1px solid #e5e7eb}
.site-menu-identity strong,.site-menu-identity span{display:block;overflow-wrap:anywhere}
.site-menu-identity strong{font-size:14px;font-weight:600}
.site-menu-identity span{margin-top:2px;color:#6b7280;font-size:13px}
.site-menu-rule{height:1px;margin:4px 0;background:#e5e7eb}
.site-header-actions>[role="alert"]{position:absolute;top:calc(100% + 8px);right:0;z-index:36;max-width:min(320px,calc(100vw - 32px));padding:10px 12px;border:1px solid #f3c7c7;border-radius:8px;background:#fff7f7;color:#9b2525;font-size:13px}

/* Burger: mobile only, same three-bar icon as rulydata.com */
.site-header .site-menu-toggle{display:none;padding:8px;border:0;background:none;color:#1a1d30}
.site-menu-icon,.site-menu-icon::before,.site-menu-icon::after{display:block;width:22px;height:2px;background:currentColor;content:"";transition:transform .2s,background .2s}
.site-menu-icon{position:relative}
.site-menu-icon::before{position:absolute;top:-7px}
.site-menu-icon::after{position:absolute;top:7px}
.site-menu-toggle[aria-expanded="true"] .site-menu-icon{background:transparent}
.site-menu-toggle[aria-expanded="true"] .site-menu-icon::before{top:0;transform:rotate(45deg)}
.site-menu-toggle[aria-expanded="true"] .site-menu-icon::after{top:0;transform:rotate(-45deg)}

@media (max-width:1079px){
  .site-header-inner{gap:12px}
  .site-header .site-navigation{display:none;position:absolute;top:100%;left:-24px;right:-24px;flex-direction:column;align-items:stretch;gap:4px;margin:0;padding:16px 24px 24px;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;background:#fff;box-shadow:0 12px 24px rgba(16,24,40,.08)}
  .site-header .site-navigation.site-navigation-open{display:flex}
  .site-header .site-navigation a{display:block;padding:12px 0;border-bottom:1px solid #e5e7eb;border-radius:0;color:#1a1d30;font-size:16px}
  .site-header .site-navigation a:hover,.site-header .site-navigation a:focus-visible{background:transparent}
  .site-header .site-navigation .site-nav-mobile{display:block}
  .site-header .site-navigation a.site-nav-cta{margin-top:12px;padding:13px 20px;border:0;border-radius:10px;background:#6b35e8;color:#fff;font-weight:600;text-align:center}
  .site-header .site-sign-in-link,.site-header .site-start-link{display:none}
  .site-header .site-menu-toggle{display:block}
  .site-account-label{display:none}
  .site-header .site-account-toggle{padding:0 12px 0 5px}
}
@media (max-width:480px){
  .site-header-inner{width:calc(100% - 32px);height:62px}
  .site-brand-logo{height:40px}
  .site-header .site-navigation{left:-16px;right:-16px;padding:16px 16px 20px}
}
