/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Astra Child Theme for Great Project Solutions
Author: Great Project Solutions
Template: astra
Version: 1.0.0
*/

/* ─────────────────────────────────────────────
   COMING SOON PAGE STYLES
   Font sizes at original design scale.
   Line-height reduced 25% throughout.
   ───────────────────────────────────────────── */

/* 16px base — matches original standalone HTML */
body.coming-soon-page {
  font-size: 16px !important;
}
body.coming-soon-page * {
  font-size: revert;
}

* { margin: 0; padding: 0; box-sizing: border-box }
:root {
  --navy: #1d3461; --navy2: #25407a; --gold: #c8890a; --gold2: #e8a020;
  --white: #fff; --offwhite: #f7f8fa; --text: #2d3748; --muted: #6b7280; --border: #e5e7eb;
}
body.coming-soon-page { font-family: 'Segoe UI', system-ui, sans-serif; color: var(--text); line-height: 1.6; scroll-behavior: smooth; }
body.coming-soon-page img { max-width: 100%; display: block }

/* ── HEADER ── */
body.coming-soon-page header.cs-header {
  background: var(--white);
  padding: clamp(6px, 1.5vw, 11px) clamp(16px, 5vw, 48px);
  display: flex; align-items: center;
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 1px 12px rgba(0,0,0,.07);
  position: sticky; top: 0; z-index: 100;
}
body.coming-soon-page .logo { display: flex; align-items: center }
body.coming-soon-page .logo-img {
  width: clamp(150px, 30vw, 300px);
  height: auto; flex-shrink: 0; display: block;
}

/* ── HEADER NAV ── */
body.coming-soon-page .cs-nav {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 36px);
  margin-left: auto;
}
body.coming-soon-page .cs-nav-link {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(.78rem, 1.1vw, .9rem) !important;
  font-weight: 600; letter-spacing: .4px;
  color: var(--navy) !important;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  padding-bottom: 3px;
  transition: color .2s;
}
body.coming-soon-page .cs-nav-link::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transition: width .25s ease;
}
@media(hover:hover) {
  body.coming-soon-page .cs-nav-link:hover { color: var(--gold) !important; }
  body.coming-soon-page .cs-nav-link:hover::after { width: 100%; }
}

/* Hide nav on very small screens */
@media(max-width: 520px) {
  body.coming-soon-page .cs-nav { display: none; }
}

/* ── NAV SOCIAL ICONS ── */
body.coming-soon-page .cs-nav-divider {
  width: 1px; height: 18px;
  background: var(--border);
  margin: 0 4px;
}
body.coming-soon-page .cs-nav-social {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--border);
  color: var(--navy) !important;
  text-decoration: none;
  font-size: .85rem;
  transition: color .2s, border-color .2s, background .2s;
  flex-shrink: 0;
}
@media(hover:hover) {
  body.coming-soon-page .cs-nav-social:hover {
    color: var(--gold) !important;
    border-color: var(--gold);
    background: #fffbf2;
  }
}

/* ── HERO ── */
body.coming-soon-page .hero {
  background: var(--navy); color: var(--white);
  text-align: center;
  padding: clamp(56px, 10vw, 90px) clamp(20px, 6vw, 48px) clamp(52px, 9vw, 82px);
  position: relative; overflow: hidden
}
body.coming-soon-page .hero::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: clamp(160px, 40vw, 320px); height: clamp(160px, 40vw, 320px);
  border-radius: 50%; border: clamp(36px, 8vw, 70px) solid rgba(200,137,10,.08); pointer-events: none
}
body.coming-soon-page .hero::after {
  content: ''; position: absolute; bottom: -80px; left: -80px;
  width: clamp(180px, 45vw, 380px); height: clamp(180px, 45vw, 380px);
  border-radius: 50%; border: clamp(40px, 9vw, 80px) solid rgba(255,255,255,.04); pointer-events: none
}
body.coming-soon-page .hero-pill {
  display: inline-block; background: rgba(200,137,10,.18); color: var(--gold2);
  border: 1px solid rgba(200,137,10,.35);
  font-size: clamp(.62rem, .8vw, .72rem) !important;
  font-weight: 600;
  letter-spacing: clamp(1.5px, 0.4vw, 3px); text-transform: uppercase;
  padding: 7px 20px; border-radius: 30px; margin-bottom: 22px
}

/* Hero h2 — explicit white, original size, beats Astra's heading rules */
body.coming-soon-page .hero h2,
body.coming-soon-page .hero h2.entry-title,
body.coming-soon-page section.hero h2 {
  font-size: clamp(1.5rem, 4.5vw, 2.7rem) !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
}
body.coming-soon-page .hero h2 span,
body.coming-soon-page section.hero h2 span { color: var(--gold2) !important }

body.coming-soon-page .hero-desc {
  font-size: clamp(.88rem, 1.5vw, 1.05rem) !important;
  opacity: .82; max-width: 580px; margin: 0 auto 32px;
}
body.coming-soon-page .hero-bar { width: 56px; height: 3px; background: var(--gold); margin: 0 auto; border-radius: 2px }

/* ── ABOUT ── */
body.coming-soon-page .about {
  background: var(--white);
  padding: clamp(48px, 8vw, 72px) clamp(20px, 6vw, 48px);
  max-width: 860px; margin: 0 auto; text-align: center
}
body.coming-soon-page .section-eyebrow {
  font-size: .68rem !important;
  letter-spacing: 4px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 10px
}
body.coming-soon-page .about h3 {
  font-size: clamp(1.25rem, 3vw, 1.65rem) !important;
  color: var(--navy); margin-bottom: 18px; font-weight: 700;
}
body.coming-soon-page .about p {
  font-size: clamp(.88rem, 1.5vw, .97rem) !important;
  color: var(--muted); line-height: 1.85
}

/* ── SECTORS ── */
body.coming-soon-page .sectors {
  background: var(--offwhite);
  padding: clamp(48px, 8vw, 64px) clamp(20px, 6vw, 48px); text-align: center
}
body.coming-soon-page .sectors h3 {
  font-size: clamp(1.15rem, 2.5vw, 1.35rem) !important;
  color: var(--navy); margin-bottom: 6px; font-weight: 700;
}
body.coming-soon-page .sectors .sec-sub {
  color: var(--muted); font-size: clamp(.82rem, 1.4vw, .88rem) !important;
  margin-bottom: 32px
}
body.coming-soon-page .sector-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 960px; margin: 0 auto
}
body.coming-soon-page .sector-tag {
  background: var(--white); border: 1.5px solid var(--border); border-radius: 8px;
  padding: clamp(8px, 1.5vw, 10px) clamp(12px, 2.5vw, 18px);
  font-size: clamp(.78rem, 1.3vw, .83rem) !important;
  color: var(--navy); font-weight: 500;
  display: flex; align-items: center; gap: 8px;
  transition: .2s; cursor: default;
  -webkit-tap-highlight-color: transparent
}
@media(hover:hover) {
  body.coming-soon-page .sector-tag:hover {
    border-color: var(--gold); background: #fffbf2;
    transform: translateY(-2px); box-shadow: 0 4px 14px rgba(200,137,10,.13)
  }
}
body.coming-soon-page .sector-tag i { color: var(--gold); font-size: .85rem !important }

/* ── CAPABILITIES ── */
body.coming-soon-page .capabilities { padding: clamp(48px, 8vw, 72px) clamp(20px, 6vw, 48px); background: var(--white) }
body.coming-soon-page .cap-inner { max-width: 960px; margin: 0 auto; text-align: center }
body.coming-soon-page .cap-inner h3 {
  font-size: clamp(1.15rem, 2.5vw, 1.35rem) !important;
  color: var(--navy); margin-bottom: 6px; font-weight: 700;
}
body.coming-soon-page .cap-inner .cap-sub {
  color: var(--muted); font-size: clamp(.82rem, 1.4vw, .88rem) !important;
  margin-bottom: 40px
}
body.coming-soon-page .cap-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; text-align: left
}
body.coming-soon-page .cap-card {
  background: var(--offwhite); border-radius: 10px;
  padding: clamp(20px, 4vw, 30px) clamp(18px, 3.5vw, 26px);
  border-top: 4px solid var(--navy); transition: .2s
}
@media(hover:hover) {
  body.coming-soon-page .cap-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(29,52,97,.1) }
}
body.coming-soon-page .cap-icon {
  width: 42px; height: 42px; background: var(--navy); border-radius: 9px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px
}
body.coming-soon-page .cap-icon i { color: var(--gold2); font-size: 1rem !important }
body.coming-soon-page .cap-card h4 {
  color: var(--navy); font-size: clamp(.95rem, 1.6vw, 1rem) !important;
  margin-bottom: 8px; font-weight: 600;
}
body.coming-soon-page .cap-card p {
  font-size: clamp(.82rem, 1.3vw, .855rem) !important;
  color: var(--muted); line-height: 1.75
}

/* ── FOOTER ── */
body.coming-soon-page footer.cs-footer {
  background: var(--navy); color: var(--white); text-align: center;
  padding: clamp(40px, 7vw, 52px) clamp(20px, 6vw, 48px)
}
body.coming-soon-page .footer-eyebrow {
  font-size: .65rem !important;
  letter-spacing: 4px; text-transform: uppercase; color: var(--gold2); margin-bottom: 10px
}
body.coming-soon-page footer.cs-footer h4 {
  font-size: clamp(1rem, 2vw, 1.2rem) !important;
  font-weight: 600; margin-bottom: 6px;
  color: #ffffff !important;
}
body.coming-soon-page footer.cs-footer .footer-desc {
  font-size: clamp(.8rem, 1.4vw, .85rem) !important;
  opacity: .6; margin-top: 8px; max-width: 480px; margin-left: auto; margin-right: auto;
}
body.coming-soon-page .footer-divider { width: 40px; height: 2px; background: rgba(200,137,10,.4); margin: 20px auto }
body.coming-soon-page .footer-tagline {
  font-size: .68rem !important;
  letter-spacing: 3px; text-transform: uppercase; opacity: .4
}

@media(max-width: 480px) {
  body.coming-soon-page .logo-img { width: clamp(140px, 67vw, 200px) }
}