/* ============================================================
   SPACE EA SYSTEMS — AEROSPACE / DEFENSE VISUAL LAYER
   Loads AFTER style.css and overrides the inherited
   web-hosting template aesthetic.

   Brand palette preserved:
     --navy       #232E3F   primary
     --navy-deep  #222D3A   sections / footer
     --steel      #3A5675   secondary / links
     --orange     #FF8135   accent only
   ============================================================ */

:root {
  --navy:       #232E3F;
  --navy-deep:  #1B2430;
  --navy-mid:   #222D3A;
  --steel:      #3A5675;
  --steel-soft: #5E7A9B;
  --orange:     #FF8135;
  --ink:        #2B3440;
  --body:       #55606E;
  --hair:       rgba(58, 86, 117, .22);
  --hair-light: rgba(255, 255, 255, .13);
}

/* ------------------------------------------------------------
   1 — TYPOGRAPHY: precise, technical, wide-tracked
   ------------------------------------------------------------ */
body {
  color: var(--body);
  font-size: 16.5px;
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  letter-spacing: .04em;
}

h1 { font-weight: 800; letter-spacing: .06em; }
h2 { font-weight: 800; letter-spacing: .05em; }
h3 { font-weight: 700; letter-spacing: .045em; }

/* Section heading with a precision rule beneath it */
.features h2,
.features h3,
.features h5 {
  text-transform: uppercase;
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 26px;
}

.features h2::after,
.features h3::after,
.features h5::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 2px;
  background: var(--orange);
}

/* Feature-card headings: left-aligned rule, not centered */
.features ul li h3 {
  font-size: 14.5px;
  line-height: 1.45;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left !important;
  padding-bottom: 14px;
  margin-bottom: 16px;
  margin-top: 0;
  color: var(--navy);
  border-bottom: 1px solid var(--hair);
}
.features ul li h3::after { display: none; }
.features ul li h3 br { display: none; }

/* ------------------------------------------------------------
   2 — INNER PAGE HEADERS
   Replaces the orange low-poly "cloud" JPGs with a deep-space
   gradient, hairline engineering grid, and a starfield.
   ------------------------------------------------------------ */
header.alt-1,
header.alt-2,
header.alt-3,
header.alt-4,
header.alt-5 {
  background: linear-gradient(160deg, #141C26 0%, #232E3F 45%, #2C3B52 100%) !important;
  min-height: 420px !important;
  position: relative;
  overflow: hidden;
}

/* Engineering grid overlay */
header.alt-1::before,
header.alt-2::before,
header.alt-3::before,
header.alt-4::before,
header.alt-5::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.055) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 84px);
  pointer-events: none;
  z-index: 1;
}

/* Starfield + horizon glow */
header.alt-1::after,
header.alt-2::after,
header.alt-3::after,
header.alt-4::after,
header.alt-5::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.2px 1.2px at 27% 68%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.6px 1.6px at 41% 31%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.1px 1.1px at 56% 76%, rgba(255,255,255,.5),  transparent),
    radial-gradient(1.5px 1.5px at 68% 18%, rgba(255,255,255,.8),  transparent),
    radial-gradient(1.2px 1.2px at 79% 58%, rgba(255,255,255,.6),  transparent),
    radial-gradient(1.3px 1.3px at 89% 34%, rgba(255,255,255,.7),  transparent),
    radial-gradient(1.1px 1.1px at 33% 88%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.4px 1.4px at 94% 79%, rgba(255,255,255,.6),  transparent),
    radial-gradient(1.2px 1.2px at 6%  57%, rgba(255,255,255,.5),  transparent),
    radial-gradient(ellipse 120% 55% at 50% 118%, rgba(255,129,53,.16), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* Header content sits above the overlays */
header .message,
header .top { position: relative; z-index: 3; }
header.alt-1 .message,
header.alt-2 .message,
header.alt-3 .message,
header.alt-4 .message,
header.alt-5 .message {
  top: 150px;
}

/* Page title treatment */
header .message h1 {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 800;
  font-size: 42px;
}

/* "Space EA Systems" eyebrow — restyled as a technical label */
.message-intro p {
  text-transform: uppercase;
  letter-spacing: .34em;
  font-size: 12px !important;
  font-weight: 600;
  color: var(--orange) !important;
}
.message-intro span.message-line:after {
  background: rgba(255,255,255,.26) !important;
}

/* ------------------------------------------------------------
   3 — HOMEPAGE HERO
   Keeps the nebula photograph but grades it toward brand navy
   and adds the same grid so it reads intentional, not stock.
   ------------------------------------------------------------ */
header {
  background-size: cover !important;
  background-position: center center !important;
  min-height: 560px !important;
  position: relative;
  overflow: hidden;
}

header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20,28,38,.78) 0%, rgba(24,33,46,.5) 45%, rgba(20,28,38,.85) 100%),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.04) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 84px);
  z-index: 1;
  pointer-events: none;
}

header .message h1 { text-shadow: 0 2px 24px rgba(0,0,0,.45); }

/* Hero CTA — sharp, bordered, accent on hover */
header .message .button,
.slidercaption .button {
  border-radius: 0 !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  background: transparent !important;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px !important;
  padding: 14px 34px !important;
  transition: all .25s ease;
}
header .message .button:hover,
.slidercaption .button:hover {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
}

/* ------------------------------------------------------------
   4 — NAVIGATION: sharpen the template's rounded pills
   ------------------------------------------------------------ */
.top { background: rgba(20,28,38,.86) !important; border-bottom: 1px solid var(--hair-light); }
.top.sticky { background: rgba(20,28,38,.96) !important; }

.sf-menu li a {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 12.5px;
}
.sf-menu li a:hover { border-radius: 0 !important; background: var(--orange) !important; }
.sf-menu li.current-menu-item a,
.sf-menu li.current-menu-parent a,
.sf-menu li.current_page_parent a {
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: inset 0 -2px 0 var(--orange);
}
.sf-menu ul {
  border-radius: 0 !important;
  background: var(--navy) !important;
  border: 1px solid var(--hair-light);
}
.sf-menu ul li a { text-transform: none; letter-spacing: .02em; }
.sf-menu li li.current-menu-item a,
.sf-menu li.current-menu-parent li a,
.sf-menu li.current-menu-item ul.sub-menu li a {
  background: transparent !important;
  box-shadow: inset 2px 0 0 var(--orange);
}
.sf-menu li li.current-menu-item a:hover,
.sf-menu li.current-menu-parent li a:hover,
.sf-menu li.current-menu-item ul.sub-menu li a:hover {
  background: var(--orange) !important;
}

/* ------------------------------------------------------------
   5 — CONTENT SECTIONS
   Cream/peach → clean white + slate. Sharp, panelled, technical.
   ------------------------------------------------------------ */
.features {
  background: #FFFFFF !important;
  padding: 88px 0 !important;
  border-top: 1px solid var(--hair);
}

/* Alternating band: cool slate instead of peach */
.features.servers {
  background: #F4F6F8 !important;
  padding: 78px 0 !important;
  border-top: 1px solid var(--hair);
}

/* Dark emphasis band: brand navy instead of neutral gray */
.features.premium-servers {
  background: var(--navy-mid) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden;
}
.features.premium-servers::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.04) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 72px);
  pointer-events: none;
}
.features.premium-servers .row { position: relative; z-index: 2; }
.features.premium-servers h2,
.features.premium-servers h3,
.features.premium-servers h5 { color: #FFFFFF !important; }
.features.premium-servers p  { color: rgba(255,255,255,.72) !important; }

/* Icons: smaller, precise, orange accent retained */
.features i {
  font-size: 30px !important;
  color: var(--orange) !important;
  margin-bottom: 18px !important;
}

/* Capability cards: bordered panels with an accent tick.
   Foundation's block-grid leaves each <li> at its own natural
   height, so the panel borders end at staggered heights.
   Flex makes every card in a row match the tallest. */
.features ul[class*="block-grid"] {
  margin-top: 48px !important;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.features ul[class*="block-grid"] > li {
  display: flex;
  flex-direction: column;
  float: none !important;
}

.features ul li {
  text-align: left !important;
  padding: 32px 28px !important;
  min-height: 250px !important;
  background: #FFFFFF;
  border: 1px solid var(--hair);
  position: relative;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

/* The legacy template drew a 3-column divider grid and stripped
   edge borders via :nth-child(3n+3) and :nth-last-child(-n+3).
   These are now self-contained panels, so every side is restored. */
.features ul li,
.features ul li:nth-child(3n+3),
.features ul li:nth-last-child(-n+3) {
  border: 1px solid var(--hair) !important;
}
.features.premium-servers ul li,
.features.premium-servers ul li:nth-child(3n+3),
.features.premium-servers ul li:nth-last-child(-n+3) {
  border: 1px solid var(--hair-light) !important;
}

.features ul li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 42px;
  height: 3px;
  background: var(--orange);
}

.features ul li:hover {
  border-color: var(--steel-soft);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(35,46,63,.09);
}

.features ul li p { text-align: left !important; }

.features.servers ul li { background: #FFFFFF; }
.features.premium-servers ul li {
  background: rgba(255,255,255,.035);
  border-color: var(--hair-light);
}
.features.premium-servers ul li p { color: rgba(255,255,255,.7) !important; }

/* Intro paragraph under section headings: centered, measured */
.features > .row > .columns > p {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------
   6 — CALL TO ACTION
   Drops the heavy "long shadow" novelty type for flat, sharp type.
   ------------------------------------------------------------ */
.calltoaction {
  background: var(--navy-deep) !important;
  padding: 72px 0 !important;
  position: relative;
  overflow: hidden;
}
.calltoaction::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 84px);
  pointer-events: none;
}
.calltoaction .row { position: relative; z-index: 2; }

.calltoaction .longshadow {
  text-shadow: none !important;
  font-size: 40px !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
.calltoaction h2 {
  font-size: 36px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #FFFFFF !important;
}
.calltoaction h2 span { color: var(--orange) !important; }
.calltoaction h3 {
  color: rgba(255,255,255,.66) !important;
  font-size: 16px !important;
  letter-spacing: .06em;
  font-weight: 400 !important;
}
.calltoactioninfo {
  border-top: 1px solid var(--hair-light) !important;
  padding-top: 44px !important;
}
.calltoactioninfo .button {
  background: var(--orange) !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px !important;
  padding: 15px 36px !important;
  border: 1px solid var(--orange) !important;
}
.calltoactioninfo .button:hover {
  background: transparent !important;
  color: var(--orange) !important;
}

/* ------------------------------------------------------------
   7 — FORMS & BUTTONS (contact page)
   ------------------------------------------------------------ */
input[type="text"], input[type="password"], input[type="date"],
input[type="datetime"], input[type="email"], input[type="number"],
input[type="search"], input[type="tel"], input[type="time"],
input[type="url"], textarea, select {
  border-radius: 0 !important;
  border: 1px solid var(--hair) !important;
  padding: 12px 14px !important;
  background: #FFFFFF !important;
  transition: border-color .2s ease;
}
input[type="text"]:focus, input[type="email"]:focus,
input[type="tel"]:focus, textarea:focus, select:focus {
  border-color: var(--steel) !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(58,86,117,.1) !important;
}

.button,
form#commentform input#submit,
.wpcf7-submit {
  border-radius: 0 !important;
  background: var(--navy) !important;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px !important;
  padding: 14px 32px !important;
  border: 1px solid var(--navy) !important;
  transition: all .25s ease;
}
.button:hover,
form#commentform input#submit:hover,
.wpcf7-submit:hover {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
}

/* ------------------------------------------------------------
   8 — FOOTER
   ------------------------------------------------------------ */
footer {
  background: var(--navy-deep) !important;
  padding: 64px 0 20px !important;
  border-top: 2px solid var(--orange);
}
.contacts i { color: var(--orange); font-size: 26px !important; }
.contacts a:hover { color: var(--orange) !important; }

.footerlinks {
  border-top: 1px solid var(--hair-light) !important;
  border-bottom: 1px solid var(--hair-light) !important;
}
.footerlinks .border-right { border-right: 1px solid var(--hair-light) !important; }
.footerlinks h2 {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px !important;
  color: var(--orange) !important;
}
.footerlinks ul li a:hover { color: var(--orange) !important; }

/* ------------------------------------------------------------
   9 — RESILIENT ANIMATION
   WOW.js sets inline visibility:hidden on .wow elements until
   they scroll into view. If JS is blocked, slow, or the element
   never enters the viewport, that content stays invisible
   permanently. Content must never depend on JS to be readable,
   so we force it visible and let the animation be purely
   decorative on top.
   ------------------------------------------------------------ */
.wow { visibility: visible !important; }

@media (prefers-reduced-motion: reduce) {
  .wow,
  .animated {
    animation: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------
   10 — MISC TEMPLATE CLEANUP
   ------------------------------------------------------------ */
.testimonials { background: var(--navy-mid) !important; }
.testimonial-content,
.testimonials .circle { border-radius: 0 !important; background: var(--steel) !important; }
.testimonials .circle { border-radius: 50% !important; }

a { transition: color .2s ease; }
a:hover { color: var(--orange); }

img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------
   12 — LINKED INDEX ROWS
   Pages like Services list their sub-pages as <h3><a>. With the
   generic heading rule those render as five stacked "section
   headings" with five orange rules — repetitive, and it hides
   the fact that they're clickable. Present them as an index.
   ------------------------------------------------------------ */
.features h2:has(> a),
.features h3:has(> a) {
  padding-bottom: 0;
  margin: 0 0 10px;
}
.features h2:has(> a)::after,
.features h3:has(> a)::after { display: none; }

.features h2 > a,
.features h3 > a {
  display: block;
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
  padding: 20px 56px 20px 26px;
  background: #FFFFFF;
  border: 1px solid var(--hair);
  border-left: 3px solid transparent;
  color: var(--navy);
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  position: relative;
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.features h2 > a::after,
.features h3 > a::after {
  content: "→";
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  color: var(--orange);
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
}

.features h2 > a:hover,
.features h3 > a:hover {
  border-left-color: var(--orange);
  border-color: var(--hair);
  border-left-color: var(--orange);
  color: var(--navy);
  transform: translateX(3px);
  box-shadow: 0 8px 22px rgba(35,46,63,.08);
}

.features h2 > a:hover::after,
.features h3 > a:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Card headings inside panels are not index rows */
.features ul li h3 > a {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  max-width: none;
  box-shadow: none;
}
.features ul li h3 > a::after { display: none; }

/* ------------------------------------------------------------
   13 — ACCORDION AFFORDANCE (Careers)
   The "Available Positions" groups are click-to-expand, but the
   headings gave no signal they were interactive. Add a +/−
   indicator that reflects the open state.
   ------------------------------------------------------------ */
.expanding .item h5 { margin: 0; padding-bottom: 0; }
.expanding .item h5::after { display: none !important; }
.expanding .item h5 > a {
  cursor: pointer;
  display: inline-block;
  position: relative;
  padding: 16px 0 16px 34px;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 14px;
}
.expanding .item h5 > a::before {
  content: "+";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  line-height: 17px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--orange);
  border: 1px solid var(--orange);
}
.expanding .item h5 > a:hover { color: var(--orange); }
.expanding .item:has(.content_w.open) h5 > a::before { content: "\2013"; }

.expanding .item { width: auto !important; }

/* ------------------------------------------------------------
   11 — MOBILE NAV FIX (pre-existing defect)
   style.css hides the desktop menu with `.js nav.desktop-menu`,
   but the markup carries that class on the <ul>
   (<ul class="sf-menu desktop-menu">), so the selector never
   matched and BOTH the hamburger and the full desktop menu
   rendered on phones. Target the element that actually exists.
   ------------------------------------------------------------ */
@media only screen and (max-width: 719px) {
  .js ul.sf-menu.desktop-menu,
  .js nav.desktop-menu {
    display: none !important;
  }
  .top { position: relative !important; }
  header .logo { text-align: center; padding: 14px 0 6px; }
}

/* Mobile */
@media only screen and (max-width: 40em) {
  header { min-height: 420px !important; }
  header.alt-1, header.alt-2, header.alt-3,
  header.alt-4, header.alt-5 { min-height: 320px !important; }
  header .message h1 { font-size: 27px; letter-spacing: .1em; }
  header.alt-1 .message, header.alt-2 .message, header.alt-3 .message,
  header.alt-4 .message, header.alt-5 .message { top: 118px; }
  .features { padding: 56px 0 !important; }
  .features ul li { min-height: 0 !important; margin-bottom: 16px; }
  .calltoaction .longshadow,
  .calltoaction h2 { font-size: 26px !important; }
}