/* The site header, its phone menu and the JK FieldOps logo, for every page.
   The header rules below the first block are copied from site.css (the homepage's original styles) so the guide and
   legal pages, which don't load site.css, get the same header. Keep the two copies in step. */

/* On the guide and legal pages: undo legal.css's own logo box and narrower page width inside the header. */
.site-brand{background:none;clip-path:none;padding:0}
.site-brand span{padding-right:0}
.site-header .wrap{max-width:1180px;margin:auto;padding:0 28px}
:where(.site-header) .btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 21px;border:1px solid transparent;border-radius:6px;background:var(--orange);color:#152337;font-weight:720;font-size:15px;line-height:1.4;text-decoration:none;cursor:pointer}

/* Site-wide navigation and footer. The approved content remains unchanged. */
.site-skip-link{position:fixed;top:10px;left:14px;z-index:100;background:white;color:var(--navy);padding:10px 16px;border:2px solid var(--navy);border-radius:5px;transform:translateY(-160%);font-weight:700}
.site-skip-link:focus{transform:translateY(0)}
.site-header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 3px 12px #11243a05}
.site-header-inner{display:flex;align-items:center;gap:36px;min-height:84px}
.site-brand{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap;text-decoration:none;font-size:25px;font-weight:800;letter-spacing:-1px;line-height:1.2}
.site-brand b{color:#c7520a;font-weight:850}
.site-brand span{color:var(--navy)}
.site-menu{display:flex;align-items:center;justify-content:flex-end;gap:30px;flex:1;min-width:0}
.site-nav-links{display:flex;align-items:center;gap:24px}
.site-nav-links a{font-size:18px;font-weight:650;color:#435168;text-decoration:none;padding:10px 0;white-space:nowrap}
.site-nav-links a:hover{color:var(--navy);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:7px}
.site-nav-actions{display:flex;gap:20px;align-items:center}
.site-login{font-size:14px;font-weight:700;background:none;border:0;color:var(--navy);padding:10px 0;white-space:nowrap}
.site-login span{margin-left:3px;color:#6d7b8b}
.site-demo-link{padding:12px 17px;gap:15px;font-size:14px;white-space:nowrap}
.site-menu-toggle{display:none;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:8px 13px;border:1px solid #c2ced9;border-radius:6px;background:white;color:var(--navy);font-size:14px;font-weight:700}
.menu-symbol{display:grid;gap:4px;width:17px}
.menu-symbol i{display:block;height:2px;background:currentColor}
.site-header[data-menu-open="true"] .menu-symbol i:nth-child(2){opacity:0}
.site-header[data-menu-open="true"] .menu-symbol i:first-child{transform:translateY(6px) rotate(45deg)}
.site-header[data-menu-open="true"] .menu-symbol i:last-child{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1100px){.site-header-inner{gap:22px}.site-menu{gap:22px}.site-nav-links{gap:18px}.site-nav-actions{gap:15px}}
@media(max-width:1020px){.site-header-inner{min-height:72px;flex-wrap:wrap;gap:0;justify-content:space-between}.site-menu-toggle:not([hidden]){display:inline-flex;margin:13px 0}.site-brand{font-size:24px}.site-menu{flex-basis:100%;flex-direction:column;align-items:stretch;gap:16px;padding:8px 0 20px;border-top:1px solid var(--line);max-height:calc(100dvh - 100px);overflow-y:auto}.site-header[data-menu-ready="true"][data-menu-open="false"] .site-menu{display:none}.site-nav-links{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding-top:6px}.site-nav-links a{display:block;padding:13px 4px;min-height:44px;border-bottom:1px solid #edf1f5}.site-nav-actions{justify-content:space-between;padding:3px 4px 0;gap:16px}.site-login{min-height:44px}.site-demo-link{min-height:44px}}
@media(max-width:560px){.site-nav-links{gap:0 14px}.site-menu .site-demo-link{padding:11px 15px}.site-brand{font-size:23px}}
/* JK FieldOps identity: a white wordmark panel with a true 45-degree edge. */
.site-header{background:var(--navy);border-bottom:0;box-shadow:none}
.site-header-inner{gap:24px}
.site-brand{align-items:center;gap:.24em;color:var(--navy);font-weight:800;letter-spacing:-.035em}
.site-brand b{color:#c7520a;font-weight:800}
.site-brand span{color:var(--navy)}
.jk-brand-panel{--brand-panel-height:84px;position:relative;isolation:isolate;height:var(--brand-panel-height);padding-right:var(--brand-panel-height);flex:none}
.jk-brand-panel::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-100vw;right:0;background:#fff;clip-path:polygon(0 0,100% 0,calc(100% - var(--brand-panel-height)) 100%,0 100%)}
.site-nav-links a,.site-login{color:#e4ebf4}
.site-nav-links a:hover,.site-login:hover{color:white}
.site-login span{color:#b4c4d6}
.site-menu-toggle{background:transparent;color:white;border-color:#718298}
.site-menu{border-top-color:#33465b}
.site-nav-links a{border-bottom-color:#33465b}
.site-header a:focus-visible,.site-header button:focus-visible{outline-color:var(--orange)}
@media(max-width:1120px) and (min-width:1021px){.site-header-inner{gap:16px}.site-nav-links{gap:17px}.site-menu{gap:20px}.site-nav-actions{gap:16px}.site-header .site-brand{font-size:24px}}
@media(max-width:1020px){.site-header .jk-brand-panel{--brand-panel-height:72px}.site-header-inner{gap:0}.site-header .site-brand{font-size:24px}.site-menu-toggle:not([hidden]){margin:14px 0}.site-menu{padding-top:8px}.site-menu .site-nav-actions{padding-bottom:2px}}
@media(max-width:560px){.site-header .jk-brand-panel{--brand-panel-height:64px}.site-header-inner{min-height:64px}.site-header .site-brand{font-size:22px}.site-menu-toggle:not([hidden]){margin:10px 0}}
@media(max-width:380px){.site-menu-toggle{width:44px;padding:8px}.site-menu-toggle>span:last-child{display:none}.site-header .site-brand{font-size:21px}}
@media(max-width:1020px){.menu-js .site-header:not([data-menu-ready="true"]) .site-menu{display:none}}

/* The new name (issue #275): the O is the storm mark, drawn from one shape at the top of each page, in the colors of the
   letters around it. JK and the O are deeper orange on white and bright orange on navy; in a small label the whole name takes
   the label's color. */
.jk-o{display:inline-block;width:1.04em;height:1.04em;vertical-align:-.17em;margin:0 -.01em 0 .03em;overflow:visible;transform-origin:50% 50%;animation:jk-spin 7s linear infinite}
@keyframes jk-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.jk-o{animation:none}}
.site-header .site-brand b,.site-header .site-brand .jk-o{color:#c4561a}
.site-footer .site-brand .jk-o,.footer-brand .jk-o{color:var(--orange)}
.jk-name{white-space:nowrap}
.jk-name-jk,.jk-name .jk-o{color:#c4561a}
.page-hero .jk-name-jk,.page-hero .jk-name .jk-o,.hero .jk-name-jk,.hero .jk-name .jk-o{color:var(--orange)}
.jk-name-label .jk-name-jk,.jk-name-label .jk-o{color:inherit}

/* Shared approved white-panel colors also apply to interactive examples. */
.program-brand b,.program-brand .jk-o{color:#c4561a}