/*
 Theme Name: Orion Child
 Template: generatepress
 Author: RCS
 Version: 10.31
 Description: MVP child theme for Orion ΄σΟσΚΣΖ΅ – custom header, off-canvas nav, component-library demo.
*/

/* ─── CSS Variables ─────────────────────────────────────────── */
:root{
  --brand-blue:#104aec;
  --gray-100:#f7f7f9;
  --gray-900:#111;
  --transition:cubic-bezier(.68,-0.55,.27,1.55) .35s;
}

/* ─── Global tweaks ─────────────────────────────────────────── */
body{font-family:"Open Sans",sans-serif;color:var(--gray-900);}

/* ─── Header & Hamburger ───────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:999;background:transparent;
  display:flex;align-items:center;justify-content:space-between;
}
body.scrolled .site-header{background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.05);}

.nav-toggle{
  display:flex;flex-direction:column;gap:6px;width:32px;height:24px;
  background:none;border:0;cursor:pointer;
}
.nav-toggle:hover {
	background-color: transparent !important;
}
.nav-toggle span{
  width:100%;height:3px;background:var(--gray-900);border-radius:2px;transition:var(--transition);
}
body.nav-open .nav-toggle .line1{transform:translateY(9px) rotate(45deg);}
body.nav-open .nav-toggle .line2{opacity:0;}
body.nav-open .nav-toggle .line3{transform:translateY(-9px) rotate(-45deg);}

/* ─── Off-canvas panel ─────────────────────────────────────── */
.offcanvas-nav{
  position:fixed;top:0;right:0;height:100%;width:300px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 0 var(--brand-blue);
  transform:translateX(100%);transition:transform .35s,box-shadow .2s;
}
body.nav-open .offcanvas-nav{
  transform:translateX(0);
  box-shadow:inset 0 0 0 2px var(--brand-blue);
}
.offcanvas-menu{list-style:none;margin:5rem 0 0;padding:0;}
.offcanvas-menu li{opacity:0;transform:translateX(10px);margin:0;}
body.nav-open .offcanvas-menu li{animation:menuIn .4s forwards;}
.offcanvas-menu li+li{margin-top:1rem;}
.offcanvas-menu a{
  font-size:1.1rem;text-decoration:none;color:var(--gray-900);
  transition:letter-spacing .2s,font-weight .2s;
}
.offcanvas-menu a:hover,
.offcanvas-menu a:focus{font-weight:600;letter-spacing:-.5px;color:var(--brand-blue);}

@keyframes menuIn{to{opacity:1;transform:none;}}

/* ─── Overlay (click to close) ─────────────────────────────── */
body.nav-open::before{
  content:"";position:fixed;inset:0;backdrop-filter:blur(2px);
}

/* ─── Component-library demo styles (legacy) ──────────────── */
.hero-demo{padding:6rem 1rem;text-align:center;background:linear-gradient(145deg,#fff,var(--gray-100));}
.hero-demo h1{font-size:2.5rem;margin:0 0 1rem;}
.services-demo{display:grid;gap:1.5rem;padding:4rem 1rem;}
@media(min-width:700px){.services-demo{grid-template-columns:repeat(3,1fr);} }
.service-card{padding:2rem;background:#fff;border:1px solid var(--gray-100);border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.04);}
.testimonial-demo{padding:3rem 1rem;text-align:center;background:var(--gray-100);}

/*──────────────── SINGLE-COLUMN LAYOUT ──────────────────────*/
.section{
  width:100vw;                        /* always span viewport */
  min-height:60vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem 1rem;gap:2rem;
  position:relative;
}
.section-inner{width:min(92%,1200px);margin-inline:auto;}
.center{text-align:center;}

/* ─── Hero ─────────────────────────────────────────────────── */
.section-hero{
  background-size:cover;background-position:center;
  color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.3);
}
.section-hero .section-inner{padding:8rem 0;text-align:center;}
.section-hero h1{font-size:3rem;margin:0 0 1rem;}
.btn{
  display:inline-block;background:var(--brand-blue);color:#fff;
  padding:.75em 1.8em;border-radius:4px;text-decoration:none;
}

/* ─── Story Split ──────────────────────────────────────────── */
.section-story{background:#fff;}
.section-story .section-inner{display:flex;gap:2rem;flex-wrap:wrap;}
.section-story.img-right .story-img{order:2;}
.section-story .story-img img{width:100%;max-width:520px;border-radius:8px;}
.section-story .story-content{flex:1;min-width:260px;}

/* ─── Services Grid ────────────────────────────────────────── */
.section-services{background:var(--gray-100);}
.services-grid{
  display:grid;gap:1.75rem;margin-top:2rem;
}
@media(min-width:700px){
  .services-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
}
.service-card{
  background:#fff;border:1px solid var(--gray-100);
  padding:2rem;border-radius:8px;text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.more{display:inline-block;margin-top:1rem;color:var(--brand-blue);text-decoration:none;}

/* ─── Metrics Bar ─────────────────────────────────────────── */
.section-metrics{background:#fff;}
.metrics-wrap{
  display:flex;justify-content:center;gap:3rem;flex-wrap:wrap;
  padding-block:1rem;
}
.metric{min-width:120px;text-align:center;padding:1rem;}
.metric .num{font-size:2.5rem;font-weight:700;color:var(--brand-blue);display:block;}
.metric .label{font-size:1rem;}

/* ─── Video BG ─────────────────────────────────────────────── */
.section-video{padding:0;min-height:60vh;color:#fff;}
.section-video video{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;
}
.section-video::before{
  content:"";position:absolute;inset:0;
  background:var(--overlay,rgba(0,0,0,.4));
}
.section-video .section-inner{
  position:relative;padding:8rem 1rem;text-align:center;
}

/* ─── Testimonial ──────────────────────────────────────────── */
.section-testimonial{background:var(--gray-100);}
.testimonial-wrap{max-width:800px;margin:0 auto;}
blockquote{margin:0;padding:2rem;font-style:italic;}
blockquote footer{margin-top:1rem;font-size:.9rem;}

/* ─── CTA Banner ───────────────────────────────────────────── */
.section-cta{
  background:var(--brand-blue);color:#fff;
  padding:4rem 1rem;text-align:center;
}
.section-cta h2{margin-bottom:1rem;}
.section-cta .btn{background:#fff;color:var(--brand-blue);}

/* ─── Section fade (disabled by default) ───────────────────── */
.section{opacity:1;transform:none;}          /* ready for JS animation hook */
.section.is-visible{opacity:1;transform:none;}

section, main {
width: 100% !important;
}