/* Shared header nav + footer for marketing subpages */

/* Keyboard focus indicator. Most interactive elements either set
   `outline: none` (forms) or inherit a faint browser default. This block
   restores a visible ring for keyboard users only (Tab navigation) without
   showing it on mouse click, via :focus-visible. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="radio"]:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 2px solid #ff7a1a;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Prevent ugly widow / orphan wraps site-wide.
   - text-wrap: pretty stops a paragraph from leaving one short word
     dangling on its own line ("...is dead." -> "is dead." alone).
   - text-wrap: balance evens out all lines of a heading so it doesn't
     read as 7-words / 1-word / 7-words.
   Modern browsers (Chrome 117+, Safari 17.5+, Firefox 131+) honor
   these. Older browsers ignore them silently and fall back to normal
   wrapping -- no harm done. */
p, li, blockquote, dd {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  width: 100%;
  background: rgba(15, 18, 24, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Slim announcement strip — sits inside .site-header so it stays pinned with the
   nav on every page when you scroll. (Currently the SMS "coming soon" teaser.) */
.site-header .announce-bar {
  background: #15171c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #e8eaf0;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  padding: 9px 16px;
}
.site-header .announce-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ff9a4d;
  background: rgba(255, 122, 26, 0.14);
  border: 1px solid rgba(255, 122, 26, 0.45);
  border-radius: 999px;
  padding: 2px 8px;
  margin-right: 9px;
  vertical-align: middle;
}
@media (max-width: 540px) {
  .site-header .announce-bar { font-size: 12px; padding: 8px 12px; }
  .site-header .announce-pill { margin-right: 6px; }
}

.site-header .header {
  padding: 20px clamp(20px, 4vw, 40px);
  display: flex;
  align-items: center;
  gap: 16px;
  /* Widened from 1200 -> 1440 so the full nav (Products + P&F + Manpower
     + Pricing + FAQ + Contact + Customer Login + Start free trial pill)
     fits on a single line on standard desktop widths without wrapping.
     Below 1440px viewport, the header naturally fills width and the
     responsive media query (max-width: 980px) collapses to the hamburger
     menu like before. */
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.site-header .logo-brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: inherit;
  text-decoration: none;
}

.site-header .logo-brand:hover .logo-text .accent { color: var(--orange-hover); }

.site-header .logo-mark {
  /* font-weight 600 matches the contact-page treatment (the canonical
     PO mark). All landing pages now share this weight via this shared
     file, so the brand reads identically across contact, pricing, login,
     place-finish, manpower-tracker, etc. */
  font-weight: 600;
  line-height: 0.82;
  letter-spacing: -0.08em;
  display: inline-flex;
  align-items: flex-end;
  padding: 10px 14px 12px;
  border-radius: 7px;
  background: linear-gradient(165deg, rgba(255,122,26,0.1), rgba(15,18,24,0.96));
  border: 1px solid rgba(255,122,26,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 8px 28px rgba(0,0,0,0.35);
}

.site-header .logo-mark-p { font-size: 40px; color: var(--text); }
.site-header .logo-mark-o { font-size: 40px; color: var(--orange); font-style: italic; margin-left: -3px; }
.site-header .logo-text { font-size: 36px; font-weight: 600; color: var(--text); letter-spacing: -0.02em; line-height: 1; }
.site-header .logo-text .accent { color: var(--orange); font-style: italic; }
.site-header .spacer { flex: 1; }

.site-header nav {
  display: flex;
  gap: 28px;
  align-items: center;
}

.site-header nav a {
  /* 13px reads as a confident desktop nav link. 11px was too thin --
     it looked timid next to the bold logo on the left side. Letter-
     spacing stays tight (0.06em) so the labels don't look stretched. */
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  text-decoration: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.15s;
  /* Never wrap a multi-word nav label like "Customer Login" or "P&F HUB"
     to a second line. */
  white-space: nowrap;
}

.site-header nav a:hover { color: var(--orange-hover); }

.site-header .cta-pill {
  background: var(--orange);
  color: var(--ink);
  padding: 9px 18px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}

.site-header .cta-pill:hover { background: var(--orange-hover); color: var(--ink); transform: translateY(-1px); }

.nav-toggle {
  display: none;
  margin-left: auto;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-toggle:hover { color: var(--text); border-color: var(--border-strong); }

@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .site-header .header { flex-wrap: wrap; position: relative; }
  .site-header .spacer { display: none; }
  .site-header nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 0 4px;
    border-top: 1px solid var(--border);
    margin-top: 12px;
  }
  .site-header nav.is-open { display: flex; }
  .site-header nav .cta-pill { align-self: stretch; text-align: center; }
}

.footer {
  border-top: 1px solid var(--border);
  padding: 32px clamp(20px, 4vw, 32px) 40px;
  margin-top: 48px;
}

.footer-inner {
  /* Widened 1160 -> 1320 to match the broader content container so
     footer sits flush with the rest of the page. */
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.footer-logo-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.footer-logo-brand:hover .footer-logo-text .accent { color: var(--orange-hover); }

/* Canonical footer logo. Mirrors planningops.com/index.html exactly so
   the 12 subpages (terms / privacy / dmca / pricing / contact / etc.)
   read with the same brand weight as the landing root. The landing
   index has font-weight 600 hardcoded; we ship the same here.
   2026-05-22 — shrunk from 24px chars + 6/10/8 padding -> 20px chars
   + 5/8/6 padding so the footer reads as a quieter echo of the 40px
   header logo. */
.footer .footer-logo-mark {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 0.82;
  letter-spacing: -0.08em;
  display: inline-flex;
  align-items: flex-end;
  padding: 5px 8px 6px;
  border-radius: 5px;
  background: linear-gradient(165deg, rgba(255,122,26,0.08), rgba(15,18,24,0.94));
  border: 1px solid rgba(255,122,26,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.footer .footer-logo-mark-p { font-size: 20px; font-weight: 600; color: var(--text); }
.footer .footer-logo-mark-o { font-size: 20px; font-weight: 600; color: var(--orange); font-style: italic; margin-left: -2px; }
.footer .footer-logo-text { font-family: var(--font-sans); font-size: 20px; font-weight: 600; color: var(--text); letter-spacing: -0.02em; line-height: 1; }
.footer .footer-logo-text .accent { color: var(--orange); font-style: italic; }
.footer .copyright { font-size: 11px; color: var(--text-faint); letter-spacing: 0.04em; }
.footer .footer-spacer { flex: 1; }
.footer .footer-links { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.footer .footer-links a {
  font-size: 11px;
  color: var(--text-dim);
  text-decoration: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Padding on the anchor expands the tap target without changing the
     visible label size. 8px gap baked in to the flex gap means rows
     don't overlap when the row wraps on a 375px phone. */
  padding: 6px 0;
  line-height: 1.3;
}

.footer .footer-links a:hover { color: var(--orange-hover); }

@media (max-width: 720px) {
  .site-header .logo-mark-p,
  .site-header .logo-mark-o { font-size: 32px; }
  .site-header .logo-text { font-size: 28px; }
  .site-header .logo-mark { padding: 8px 12px 10px; }
  /* Mobile-menu links open in a column under the hamburger — give them
     room to breathe + tap. Apple HIG asks for 44pt min height; the 12px
     vertical padding on a 13px font lands ~ 44px total. */
  .site-header nav a { padding: 10px 0; min-height: 24px; display: inline-flex; align-items: center; }
}

@media (max-width: 540px) {
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer .footer-spacer { display: none; }
  .footer .footer-links { gap: 8px 18px; }
  /* Was padding: 4px 0 which gave a ~21px tap target. Bumped to 12px so
     each nav link clears the 44pt Apple HIG minimum. */
  .site-header nav a { padding: 12px 0; }
  .site-header .cta-pill { padding: 14px 18px; font-size: 13px; }
}