/*
Theme Name: Strasaic Systems
Author: Strasaic Systems
Description: Responsive SSPL corporate website with editable pages, news, and FAQs.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.2
Text Domain: sspl
License: GPL-2.0-or-later
*/
:focus-visible{outline:2px solid var(--amber);outline-offset:5px}
.navlinks{gap:18px}.navlinks .current-menu-item>a{color:var(--amber)}
.navlinks ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}.navlinks li{list-style:none}
.admin-bar nav[aria-label="Main navigation"]{top:32px}
.editor-content{font-size:17px;line-height:1.8;overflow-wrap:anywhere}.editor-content p{margin-bottom:1.2em}.editor-content h2,.editor-content h3{margin:1.5em 0 .6em}.editor-content img{max-width:100%;height:auto}.editor-content a:not(.btn):not(.page-card){text-decoration:underline;text-underline-offset:4px}
.news-hero{padding:150px 0 56px;border-bottom:1px solid var(--brd)}.news-hero h1{font-size:clamp(38px,6vw,76px);line-height:1.1;max-width:1000px;margin:22px 0}.news-hero p{max-width:720px;color:var(--dim)}
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.news-card{border:1px solid var(--brd-2);border-radius:16px;overflow:hidden;background:var(--panel)}.news-card img{aspect-ratio:16/10;object-fit:cover;width:100%;height:auto}.news-card-copy{padding:26px}.news-card h2{font-size:25px;margin:14px 0}.news-card p{color:var(--dim)}.news-card time,.article-date{font:12px var(--fm);color:var(--amber)}.article-body{max-width:850px}.article-image{width:100%;max-height:500px;object-fit:cover;border-radius:16px;margin-bottom:36px}.empty-state{padding:48px;border:1px solid var(--brd);border-radius:16px}.empty-state h2{margin-bottom:12px}
.newsletter{padding:48px 0;border-top:1px solid var(--brd);background:#0b1019}.newsletter-inner{display:grid;grid-template-columns:1fr 1fr;gap:50px}.newsletter h2{font-size:30px;margin-bottom:12px}.newsletter p{color:var(--dim)}.newsletter form{display:grid;gap:14px}.newsletter label{display:block;font-size:14px}.newsletter input[type=email]{width:100%;padding:14px;border:1px solid var(--brd-2);border-radius:8px;background:#10151e;color:var(--txt);font:inherit}.newsletter .consent{display:flex;gap:10px;align-items:flex-start}.newsletter .consent input{margin-top:5px}.newsletter button{justify-self:start;cursor:pointer}.newsletter button:disabled{opacity:.6;cursor:wait}.sspl-trap{position:absolute;left:-9999px}.newsletter [role=status]{min-height:1.5em}.offline-note{position:fixed;bottom:16px;left:16px;z-index:10000;padding:12px 18px;border:1px solid var(--amber);background:#10151e;border-radius:8px;max-width:calc(100% - 32px)}
.pagination{margin-top:36px;display:flex;gap:16px;flex-wrap:wrap}.pagination .page-numbers{padding:8px 14px;border:1px solid var(--brd)}.pagination .current{color:var(--amber)}.faq-list{max-width:900px}.faq-list details{padding:24px 0}.faq-list summary{font-size:20px}.faq-list .editor-content{padding-top:16px}.post-source{margin-top:35px;padding-top:22px;border-top:1px solid var(--brd)}
@media(max-width:1100px){.navlinks,.navlinks ul{gap:12px;font-size:13px}.nav-contact{display:none}}
@media(max-width:800px){.news-grid,.newsletter-inner{grid-template-columns:1fr}.news-hero{padding-top:120px}.newsletter-inner{gap:24px}.navlinks ul{flex-wrap:wrap}.admin-bar nav[aria-label="Main navigation"]{top:46px}.news-card-copy{padding:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* ---------- Elementor ---------- */
/* SSPL widgets carry their own section padding and 1200px .wrap, so their Elementor containers collapse to full width with no padding. */
.elementor-widget[class*="elementor-widget-sspl-"]{margin-block-end:0}
.e-con:has(>.e-con-inner>.elementor-widget[class*="elementor-widget-sspl-"]),.e-con:has(>.elementor-widget[class*="elementor-widget-sspl-"]){--content-width:100%;--width:100%;--gap:0;--row-gap:0;--column-gap:0;--padding-top:0;--padding-right:0;--padding-bottom:0;--padding-left:0}
.elementor-section:has(.elementor-widget[class*="elementor-widget-sspl-"])>.elementor-container{max-width:none}
.elementor-section:has(.elementor-widget[class*="elementor-widget-sspl-"]) .elementor-column>.elementor-widget-wrap{padding:0}
.sspl-elementor-page .elementor-widget-sspl-page-hero+.elementor-widget,.sspl-elementor-page .elementor-widget-sspl-page-hero+.e-con{padding-top:64px}
.sspl-elementor-page .elementor-widget-sspl-page-cta{padding-bottom:80px}
.sspl-elementor-page .page-section:first-child{margin-top:0}
.elementor-editor-active .rv{opacity:1!important;transform:none!important;filter:none!important}
.elementor-widget-sspl-section-head+.elementor-widget .sec-head{margin-top:0}
.elementor-widget-sspl-section-head .sec-head{margin-bottom:0;padding-top:120px}
.elementor-widget-sspl-section-head+.elementor-widget-sspl-focus-grid section,.elementor-widget-sspl-section-head+.elementor-widget-sspl-method section,.elementor-widget-sspl-section-head+.elementor-widget-sspl-tracks section{padding-top:64px}
.elementor-widget-sspl-section-head+.elementor-widget-sspl-cta-band section{padding-top:20px}
/* A page body kept in a raw HTML widget has no .page-body wrapper: give it the theme container, gutters and bottom spacing. The home body carries its own full-width sections. */
body:not(.home) .sspl-elementor-page>.elementor>.elementor-widget-html,body:not(.home) .sspl-elementor-page .elementor-widget-html{max-width:1200px;margin:0 auto;padding:0 28px 80px;box-sizing:border-box}
/* SSPL page-block arrangements. Elementor pages have no .page-body wrapper, so the widgets carry these classes instead. */
.sspl-split--panel>.page-split{padding:40px;border:1px solid var(--brd);border-radius:18px;background:linear-gradient(140deg,#93c5dc09,transparent)}
.sspl-cards--steps .page-grid{grid-template-columns:1fr;gap:0}
.sspl-cards--steps .page-card{display:grid;grid-template-columns:150px 1fr 1.4fr;border:0;border-bottom:1px solid var(--brd);border-radius:0;background:transparent;padding:38px 0;align-items:center}
.sspl-cards--steps .page-number{font-size:12px}
.sspl-cards--capabilities .page-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.sspl-cards--capabilities .card-illustration{height:230px}
.sspl-cards--capabilities .card-illustration svg{width:330px;height:330px;margin:-48px auto}
.sspl-cards--split .page-split>.page-card{padding-top:45px;border-top:2px solid var(--amber)}
.sspl-cards--split .page-split>.page-card:nth-child(2){border-top-color:var(--steel)}
.sspl-faq>h2{font-size:32px;margin-bottom:24px}
.sspl-contact .enquiry{padding:32px;background:linear-gradient(140deg,#13202f90,#080c14);border:1px solid var(--brd-2);border-radius:18px}
.sspl-contact .enquiry input:focus,.sspl-contact .enquiry textarea:focus{border-color:var(--amber)}
@media(max-width:800px){.sspl-split--panel>.page-split{padding:25px}.sspl-cards--steps .page-card{grid-template-columns:1fr;gap:14px}.sspl-cards--capabilities .page-grid{grid-template-columns:1fr}.sspl-contact .enquiry{padding:23px}}
/* Card illustrations: a slow loop so the engineering art feels live. The two orbital markers drift, the dashed
   orbit ring counter-rotates, and hovering a card quickens the drift. The pause control and the reduced-motion
   rule above both stop it, because they target animations globally. */
.card-illustration .orbital-motion{animation:orbital-drift 48s linear infinite}
.card-illustration .orbit-track circle:first-child{transform-origin:250px 250px;animation:orbital-drift 90s linear infinite reverse}
.page-card:hover .card-illustration .orbital-motion{animation-duration:18s}
/* Focus-area cells. assets/site.css switches these small loops off site-wide with !important, so re-enable them
   only inside the bento artwork, slower than the original timings: dashed paths flow, markers breathe rather than
   blink out, the turbine turns and the radar sweeps. Hover quickens the flow. Pause and reduced motion still win. */
.cell .art .flow{animation:dashmove 2.6s linear infinite!important}
.cell .art .pulse{animation:sspl-cell-breathe 3.4s ease-in-out infinite!important}
.cell .art .spin-slow{transform-box:fill-box;transform-origin:center;animation:spin 14s linear infinite!important}
/* The radar sweep is a plain div that the widget positions with inline left/top, which ignores the SVG geometry and
   left the wedge adrift of the arcs. Overlay the svg box instead (same width, same 210x118 aspect, same vertical
   centring), put the gradient apex and the rotation origin on the radar centre at 105,104 of the viewBox, and mask
   to the outer arc radius of 91 units. All percentages, so it tracks the cell at every width. Inline styles need
   !important to be overridden. */
.cell .art .sweep-mini{position:absolute;left:0!important;top:50%!important;width:100%;height:auto;aspect-ratio:210/118;
 translate:0 -50%;border-radius:0;transform-origin:50% 88.14%;
 background:conic-gradient(from 0deg at 50% 88.14%,rgba(255,176,32,.38),rgba(255,176,32,.06) 45deg,transparent 80deg);
 -webkit-mask:radial-gradient(ellipse 43.33% 77.12% at 50% 88.14%,#000 97%,transparent);
 mask:radial-gradient(ellipse 43.33% 77.12% at 50% 88.14%,#000 97%,transparent);
 animation:spin 7s linear infinite!important}
.cell:hover .art .flow{animation-duration:1.5s!important}
@keyframes sspl-cell-breathe{0%,100%{opacity:1}50%{opacity:.45}}
/* Those !important rules outrank the global pause and reduced-motion rules, so restate both at higher specificity. */
html.motion-paused .cell .art :is(.flow,.pulse,.spin-slow,.sweep-mini){animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.cell .art :is(.flow,.pulse,.spin-slow,.sweep-mini){animation:none!important}}
/* CTA band. The card sits inside .beamwrap, whose ::before is a conic gradient meant to spin so only a sliver shows
   as a travelling border light. assets/site.css freezes that animation and the card's own background is almost
   transparent, so the frozen gradient floods the whole panel in orange and washes out the copy. Restore the intent:
   opaque card base in both themes, so the beam reads as a moving edge highlight, and turn the beam slowly. */
.ctaband{background:radial-gradient(600px 260px at 50% -10%,rgba(255,150,30,.16),transparent 65%),linear-gradient(180deg,#121826,#0a0e16)!important}
.beamwrap:has(.ctaband)::before{animation:spin 14s linear infinite!important}
html.motion-paused .beamwrap:has(.ctaband)::before{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.beamwrap:has(.ctaband)::before{animation:none!important}}

/* Preserve article gutters where the narrower reading column overrides .wrap. */
.article-body.wrap{width:calc(100% - 40px);max-width:850px;margin-inline:auto}

.news-banner{margin:0 0 36px}.news-banner .article-image{display:block;margin-bottom:12px}.news-banner figcaption{font-size:12px;line-height:1.6;color:var(--dim)}

/* Homepage GNSS card: restrained navigation motion within the existing illustration. */
@media (prefers-reduced-motion: no-preference) {
  body.home .cell:has(a[href*="/gnss-denied-navigation"]) .art svg > path:nth-of-type(-n+2) {
    animation: sspl-gnss-terrain 7s ease-in-out infinite alternate;
  }
  body.home .cell:has(a[href*="/gnss-denied-navigation"]) .art svg > path:nth-of-type(2) {
    animation-delay: -3.5s;
  }
  body.home .cell:has(a[href*="/gnss-denied-navigation"]) .art svg > path:nth-of-type(3) {
    transform-box: fill-box;
    transform-origin: center;
    animation: sspl-gnss-heading 6s ease-in-out infinite;
  }
  body.home .cell:has(a[href*="/gnss-denied-navigation"]) .art svg > circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: sspl-gnss-fix 3.6s ease-in-out infinite !important;
  }
  html.motion-paused body.home .cell:has(a[href*="/gnss-denied-navigation"]) .art svg > circle {
    animation-play-state: paused !important;
  }
}
@keyframes sspl-gnss-heading {
  0%,100% { transform: translate(0,0) rotate(-5deg); }
  50% { transform: translate(4px,-3px) rotate(7deg); }
}
@keyframes sspl-gnss-terrain {
  from { transform: translateX(-3px); opacity:.45; }
  to { transform: translateX(3px); opacity:.75; }
}
@keyframes sspl-gnss-fix {
  0%,100% { transform: scale(1); opacity:.65; }
  50% { transform: scale(1.2); opacity:1; }
}

/* What We Do: animate each existing engineering illustration, like the homepage. */
@media(prefers-reduced-motion:no-preference) {
  .page-capabilities :is(.page-card,.hero-tile) .art-object { transform-box:view-box;transform-origin:250px 250px; }
  .page-capabilities :is(.page-card,.hero-tile)[href*="autonomous-aerial-systems"] .art-object { animation:sspl-focus-flight 6s ease-in-out infinite; }
  .page-capabilities :is(.page-card,.hero-tile)[href*="counter-uas"] .art-object > path:first-of-type { transform-origin:250px 250px;animation:sspl-focus-turn 12s linear infinite; }
  .page-capabilities :is(.page-card,.hero-tile)[href*="counter-uas"] .art-object > circle:last-of-type,
  .page-capabilities :is(.page-card,.hero-tile)[href*="gnss-denied-navigation"] .art-object > circle,
  .page-capabilities :is(.page-card,.hero-tile)[href*="payload-mission-systems"] .art-object > circle { transform-box:fill-box;transform-origin:center;animation:sspl-gnss-fix 3.6s ease-in-out infinite; }
  .page-capabilities :is(.page-card,.hero-tile)[href*="turbojet-propulsion"] .art-object > ellipse:last-of-type { transform-box:fill-box;transform-origin:center;animation:sspl-focus-compressor 2.4s ease-in-out infinite; }
  .page-capabilities :is(.page-card,.hero-tile)[href*="turbojet-propulsion"] .art-object > path:last-of-type { stroke-dasharray:14 10;animation:sspl-focus-flow 1.8s linear infinite; }
  .page-capabilities :is(.page-card,.hero-tile)[href*="gnss-denied-navigation"] .art-object > path:first-of-type { animation:sspl-gnss-terrain 7s ease-in-out infinite alternate; }
  .page-capabilities :is(.page-card,.hero-tile)[href*="gnss-denied-navigation"] .art-object > path:nth-of-type(2) { transform-box:fill-box;transform-origin:center;animation:sspl-gnss-heading 6s ease-in-out infinite; }
  .page-capabilities :is(.page-card,.hero-tile)[href*="payload-mission-systems"] .art-object > path:last-of-type { stroke-dasharray:12 8;animation:sspl-focus-flow 2.4s linear infinite; }
  .page-capabilities :is(.page-card,.hero-tile)[href*="manufacturing-lifecycle"] .art-object > path:last-of-type { transform-origin:250px 250px;animation:sspl-focus-turn 18s linear infinite; }
  .page-capabilities:has(.motion-toggle[aria-pressed="true"]) :is(.page-card,.hero-tile) .art-object,
  .page-capabilities:has(.motion-toggle[aria-pressed="true"]) :is(.page-card,.hero-tile) .art-object *,
  .page-capabilities:has(.motion-toggle[aria-pressed="true"]) :is(.page-card,.hero-tile) .orbital-motion { animation-play-state:paused!important; }
}
@keyframes sspl-focus-flight { 0%,100% { transform:translate(0,3px) rotate(-3deg); } 50% { transform:translate(5px,-7px) rotate(3deg); } }
@keyframes sspl-focus-turn { to { transform:rotate(360deg); } }
@keyframes sspl-focus-flow { to { stroke-dashoffset:-48; } }
@keyframes sspl-focus-compressor { 0%,100% { transform:scaleX(.75);opacity:.6; } 50% { transform:scaleX(1);opacity:1; } }

/* A quiet manufacturing signature, integrated into the existing card. */
body.home .cell.c6:has(.sspl-make-in-india){flex-wrap:wrap;row-gap:24px}
.sspl-make-in-india{grid-column:1/-1;flex:0 0 100%;width:100%;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--brd);padding-top:22px}
.sspl-india-caption{font:10px/1.8 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.sspl-india-caption span{margin:0 10px;color:var(--amber)}
.sspl-make-in-india-panel{display:flex;align-items:center;flex-shrink:0;background:none;border:0;border-radius:0;padding:0;max-width:100%}
.sspl-make-in-india-panel img{display:block;width:154px;max-width:100%;height:auto;filter:invert(1);opacity:.88;animation:none}
html[data-theme="light"] .sspl-make-in-india-panel img{filter:none;opacity:.85}
@media(max-width:600px){.sspl-make-in-india{gap:18px;padding-top:20px;flex-direction:column;align-items:center;text-align:center}.sspl-make-in-india-panel img{width:144px}.sspl-india-caption{font-size:9px;letter-spacing:.08em}.sspl-india-caption span{margin:0 6px}}

/* About: editorial leadership section using the existing SSPL design tokens. */
.sspl-leadership{padding-top:72px;padding-bottom:24px}
.sspl-leadership-heading{max-width:800px;margin-bottom:36px}
.sspl-leadership-heading h2{font-size:clamp(30px,4vw,48px);line-height:1.15;letter-spacing:-.035em;margin:18px 0 22px}
.sspl-leadership-heading>p:last-child{color:var(--dim);font-size:16px;line-height:1.85;max-width:75ch}
.sspl-leadership-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.sspl-leadership-card{padding:32px;border:1px solid var(--brd);border-radius:16px;background:var(--panel)}
.sspl-leadership-card .page-number{color:var(--amber);font:10px/1.5 var(--fm);letter-spacing:.1em}
.sspl-leadership-card h3{font-size:24px;line-height:1.3;letter-spacing:-.02em;margin:18px 0}
.sspl-leadership-card p{color:var(--dim);font-size:15px;line-height:1.85;margin:0 0 16px}
.sspl-leadership-card p:last-child{margin-bottom:0}
@media(max-width:700px){.sspl-leadership{padding-top:48px}.sspl-leadership-grid{grid-template-columns:1fr;gap:18px}.sspl-leadership-card{padding:24px}.sspl-leadership-card h3{font-size:22px}}

.sspl-leadership.wrap{width:100%;max-width:none;padding-inline:0}

/* Leadership illustrations share SSPL's technical line-art and restrained motion. */
.leadership-visual{margin:22px 0 24px;padding:6px 0 16px;border-bottom:1px solid var(--brd);background:radial-gradient(ellipse at center,color-mix(in srgb,var(--amber) 6%,transparent),transparent 70%);color:var(--steel)}
.leadership-visual svg{display:block;width:100%;height:160px}
.leadership-grid-lines{stroke:var(--steel);stroke-width:.6;opacity:.12}
.leadership-accent{stroke:var(--amber)}
.leadership-compass{transform-origin:200px 80px}
.leadership-fix{transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:no-preference){
 .leadership-route{animation:sspl-focus-flow 4s linear infinite}
 .leadership-compass{animation:sspl-leadership-bearing 7s ease-in-out infinite}
 .leadership-fix{animation:sspl-gnss-fix 3.6s ease-in-out infinite}
 .leadership-check{stroke-dasharray:80;stroke-dashoffset:0;animation:sspl-leadership-check 6s ease-in-out infinite}
 .leadership-check:nth-child(2){animation-delay:.5s}.leadership-check:nth-child(3){animation-delay:1s}
 .leadership-signal{animation:sspl-leadership-signal 4s ease-in-out infinite}
 .page-about:has(.motion-toggle[aria-pressed="true"]) .leadership-visual *{animation-play-state:paused!important}
}
@keyframes sspl-leadership-bearing{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(12deg)}}
@keyframes sspl-leadership-check{0%,15%{stroke-dashoffset:80;opacity:.35}45%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.35}}
@keyframes sspl-leadership-signal{0%,100%{opacity:.3;transform:translateY(2px)}50%{opacity:1;transform:translateY(-3px)}}
@media(max-width:700px){.leadership-visual{margin:18px 0 20px}.leadership-visual svg{height:125px}}

/* Compact vertical branding and theme controls at the right of the navbar. */
nav[aria-label="Main navigation"] .sspl-nav-tools{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;flex-shrink:0;order:5;margin-left:18px}
nav[aria-label="Main navigation"] .sspl-nav-tools [data-theme-toggle]{margin:0}
.sspl-nav-tools .sspl-nav-india{display:flex;align-items:center}
.sspl-nav-india img{display:block;width:100px;height:auto;filter:invert(1);opacity:.88}
html[data-theme="light"] .sspl-nav-india img{filter:none;opacity:.85}
.sspl-nav-tools .curtain-theme-button{border-radius:4px!important;width:21.56px!important;height:21.56px!important}
@media(max-width:960px){nav[aria-label="Main navigation"] .sspl-nav-tools{margin-left:auto}nav[aria-label="Main navigation"] .sspl-nav-tools [data-theme-toggle]{align-self:flex-end}}
@media(max-width:560px){.sspl-nav-india img{width:92px}}

/* Keep one measured gap between the focus cards and The SSPL Method. */
body.home .sspl-focus { padding-bottom:40px; }
body.home .elementor-element-6faf623b .sec-head { padding-top:40px; }
@media(max-width:700px) {
  body.home .sspl-focus { padding-bottom:24px; }
  body.home .elementor-element-6faf623b .sec-head { padding-top:24px; }
}

/* Mobile-only rhythm around About SSPL and the following focus introduction. */
@media(max-width:700px){
 body.home .sspl-about{padding-top:40px;padding-bottom:24px}
 body.home .sspl-about .about-grid{gap:24px}
 body.home .sspl-about .sec-head{margin-bottom:0}
 body.home .elementor-element-170c6fb5 .sec-head{padding-top:24px}
 body.home .sspl-focus{padding-top:32px}
}