/* =========================================================================
   ASTRACOM — single-page WordPress front-end stylesheet
   Ported from index.dc.html + the _ds design system. Native Gutenberg blocks
   provide structure; this stylesheet reproduces the exact design.
   ========================================================================= */

/* ---- TOKENS ----------------------------------------------------------- */
:root {
  --astra-red: #e54242;
  --astra-red-bright: #ef4b4b;
  --astra-red-deep: #c62828;
  --astra-red-hover: #d23636;
  --astra-black: #1c1c1c;
  --astra-panel: #2b2b2b;
  --astra-panel-2: #333333;
  --astra-hero: #0d1b24;
  --astra-white: #ffffff;
  --astra-grey-1: #cccccc;
  --astra-grey-2: #bbbbbb;
  --astra-grey-3: #9a9a9a;
  --astra-border: #444444;
  --divider: #3a3a3a;
  --surface-card: var(--astra-panel);
  --surface-raised: var(--astra-panel-2);
  --font-sans: 'Montserrat','Helvetica Neue',Arial,sans-serif;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;
  --container:1140px;
}

/* ---- BASE ------------------------------------------------------------- */
body.astracom-site {
  margin: 0; background: var(--astra-black); color: var(--astra-grey-3);
  font-family: var(--font-sans); font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.astracom-site img { display:block; max-width:100%; height:auto; }
.astracom-site a { color: inherit; text-decoration: none; }
.astracom-site h1,.astracom-site h2,.astracom-site h3,.astracom-site h4,.astracom-site h5,.astracom-site h6,
.astracom-site .wp-block-heading, .site-header, .site-footer, .astracom-site .wpcf7 { font-family: var(--font-sans) !important; }
.astracom-site h1,.astracom-site h2,.astracom-site h3 { color: var(--astra-white); margin: 0; text-wrap: balance; }
.astracom-site p, .astracom-site blockquote { text-wrap: pretty; }
.astracom-site ::selection { background: var(--astra-red); color:#fff; }
.astracom-site :focus-visible { outline: 2px solid var(--astra-red); outline-offset: 3px; }
.astracom-site .wp-block-post-content { max-width: none; }

/* content sits above the fixed background */
.astracom-site .wp-site-blocks { position: relative; z-index: 1; background: transparent; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; width: 100%; box-sizing: border-box; }

/* ---- FIXED PARALLAX BACKGROUND SLIDESHOW ------------------------------ */
.astra-fixedbg { position: fixed; top:0; left:0; right:0; height: 140vh; z-index: 0; overflow: hidden; background: var(--astra-hero); will-change: transform; pointer-events: none; }
.astra-fixedbg .slide { position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat; opacity:0; animation: astraSlide 24s infinite; will-change: opacity, transform; }
.astra-fixedbg .slide.s1 { background-image:url('https://astracom.net.au/wp-content/uploads/2026/07/wide1.jpg'); animation-delay:0s; }
.astra-fixedbg .slide.s2 { background-image:url('https://astracom.net.au/wp-content/uploads/2026/07/wide2.jpg'); animation-delay:8s; }
.astra-fixedbg .slide.s3 { background-image:url('https://astracom.net.au/wp-content/uploads/2026/07/wide3.jpg'); animation-delay:16s; }
.astra-fixedbg .grad { position:absolute; inset:0; background: linear-gradient(180deg, rgba(13,27,36,0.45) 0%, rgba(13,27,36,0.52) 55%, rgba(13,27,36,0.72) 100%); }
@keyframes astraSlide { 0%{opacity:0;transform:scale(1.08);} 4%{opacity:1;} 29%{opacity:1;} 33%{opacity:0;transform:scale(1);} 100%{opacity:0;transform:scale(1);} }
@keyframes astraDot { 0%,100%{background:rgba(255,255,255,0.35);} 1%,30%{background:var(--astra-red);transform:scale(1.25);} 33%{background:rgba(255,255,255,0.35);transform:scale(1);} }
@keyframes astraScroll { 0%{opacity:0;transform:translateY(-4px);} 40%{opacity:1;} 80%,100%{opacity:0;transform:translateY(12px);} }
@keyframes astraBob { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(7px);} }
@media (prefers-reduced-motion: reduce){ .astra-fixedbg .slide, .astra-dots span, .astra-scroll { animation: none !important; } }

/* ---- HEADER (reveal on scroll) ---------------------------------------- */
.site-header { position: fixed; top:0; left:0; right:0; z-index: 60; background: rgba(15,15,15,0.82); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.06); transform: translateY(-110%); visibility: hidden; transition: transform .35s ease, visibility .35s; }
.site-header.is-pinned { transform: translateY(0); visibility: visible; }
.site-header__inner { max-width: var(--container); margin:0 auto; padding: 14px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.site-header .brand img { height:42px; width:auto; display:block; }
.site-header .brand.wp-block-image { margin:0; }
.site-nav.wp-block-navigation { gap: 28px; }
.site-nav .wp-block-navigation__container { gap: 28px; }
.site-nav .wp-block-navigation-item__content { color: var(--astra-grey-2); font-size:12.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; padding:4px 0; border-bottom:2px solid transparent; }
.site-nav .wp-block-navigation-item__content:hover, .site-nav .wp-block-navigation-item.is-active .wp-block-navigation-item__content { color: var(--astra-white); }
.site-nav .wp-block-navigation-item.is-active .wp-block-navigation-item__content { border-bottom-color: var(--astra-red); }

/* ---- BUTTONS ---------------------------------------------------------- */
.astracom-site .wp-block-button__link { display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-sans); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:0.14em; border-radius:999px; border:2px solid transparent; line-height:1; padding:17px 44px; font-size:14px; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.btn--primary .wp-block-button__link { background: var(--astra-red); color:#fff; border-color: var(--astra-red); }
.btn--primary .wp-block-button__link:hover { background: var(--astra-red-hover); border-color: var(--astra-red-hover); color:#fff; }
.btn--secondary .wp-block-button__link { background: transparent; color:#fff; border-color: rgba(255,255,255,0.55); }
.btn--secondary .wp-block-button__link:hover { border-color:#fff; color:#fff; }
.btn--block .wp-block-button { width:100%; }
.btn--block .wp-block-button__link { width:100%; }

/* ---- SECTION TITLE ---------------------------------------------------- */
.section-title { max-width:720px; margin:0 auto; text-align:center; }
.section-title h2 { margin:0; color:var(--astra-white); font-weight:var(--fw-bold); font-size:26px; text-transform:uppercase; letter-spacing:0.22em; line-height:1.25; }
.section-title .underline { display:block; width:46px; height:3px; background:var(--astra-red); margin:18px auto 0; }
.section-title .intro { margin:22px auto 0; color:var(--astra-grey-3); font-weight:var(--fw-light); line-height:1.7; }

/* ---- SECTIONS (translucent over fixed bg) ----------------------------- */
.sec { position: relative; padding: 96px 0; }
.sec::before { content:''; position:absolute; inset:0; z-index:0; background: linear-gradient(180deg, rgba(18,18,18,0.82), rgba(18,18,18,0.88)); }
.sec > .wrap { position: relative; z-index: 1; }
.sec--include { border-top:1px solid var(--divider); border-bottom:1px solid var(--divider); }
.sec--include::before { background: linear-gradient(180deg, rgba(22,22,22,0.8), rgba(22,22,22,0.86)); }

/* ---- HERO ------------------------------------------------------------- */
.hero { position: relative; min-height: 100vh; display:flex; align-items:center; justify-content:center; text-align:center; }
.hero__inner { position: relative; z-index: 2; padding: 130px 24px 150px; max-width: 940px; margin:0 auto; }
.hero__mark { font-weight:800; font-size: clamp(52px,11vw,104px); letter-spacing:0.12em; text-transform:uppercase; line-height:1; margin-bottom:22px; }
.hero__mark .astra { color: var(--astra-red); }
.hero__mark .com { color: var(--astra-grey-1); }
.hero__tagline { color: var(--astra-white); font-size: clamp(16px,2.4vw,21px); font-weight:300; letter-spacing:0.04em; margin:0 auto 12px; max-width:680px; }
.hero__sub { color: var(--astra-grey-2); font-size: clamp(14px,1.8vw,16px); font-weight:300; line-height:1.7; margin:0 auto 38px; max-width:620px; }
.hero .wp-block-buttons { justify-content:center; gap:16px; }
.astra-dots { position:absolute; bottom:92px; left:0; right:0; z-index:3; display:flex; gap:11px; justify-content:center; }
.astra-dots span { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.35); animation: astraDot 24s infinite; }
.astra-dots span:nth-child(2){ animation-delay:8s; }
.astra-dots span:nth-child(3){ animation-delay:16s; }
.astra-scroll { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:3; animation: astraBob 2.4s ease-in-out infinite; }
.astra-scroll span.mouse { display:block; width:26px; height:42px; border:2px solid rgba(255,255,255,0.55); border-radius:16px; position:relative; }
.astra-scroll span.mouse::after { content:''; position:absolute; top:7px; left:50%; margin-left:-2px; width:4px; height:8px; border-radius:2px; background:var(--astra-red); animation: astraScroll 2s ease-in-out infinite; }

/* ---- ABOUT FEATURE CARDS ---------------------------------------------- */
.grid-about { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px; margin-top:60px; }
.feature-card { background:var(--surface-card); border:1px solid var(--divider); box-shadow:0 2px 10px rgba(0,0,0,0.35); overflow:hidden; display:flex; flex-direction:column; transition:transform .25s ease, border-color .25s ease; height:100%; }
.feature-card:hover { transform:translateY(-5px); border-color:var(--astra-red); }
.feature-card .fc-img { margin:0; }
.feature-card .fc-img img { width:100%; height:214px; object-fit:cover; display:block; }
.feature-card .fc-body { padding:28px 28px 32px; text-align:center; }
.feature-card h3 { margin:0 0 12px; color:var(--astra-white); font-size:18px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }
.feature-card p { margin:0; color:var(--astra-grey-3); font-size:14.5px; font-weight:300; line-height:1.7; }

/* ---- PRICING CARDS ---------------------------------------------------- */
.grid-plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:60px; }
.pricing-card { background:var(--surface-card); border:1px solid var(--divider); box-shadow:0 2px 10px rgba(0,0,0,0.35); padding:38px 28px; text-align:center; display:flex; flex-direction:column; align-items:center; height:100%; box-sizing:border-box; transition:transform .25s ease, box-shadow .25s ease; }
.pricing-card:hover { transform:translateY(-5px); box-shadow:0 8px 26px rgba(0,0,0,0.45); }
.pricing-card.is-featured { background:var(--surface-raised); border-color:var(--astra-red); box-shadow:0 8px 26px rgba(0,0,0,0.45); }
.pricing-card h3 { margin:0; color:var(--astra-white); font-size:18px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; }
.pricing-card .price { margin-top:20px; line-height:1; color:var(--astra-red); }
.pricing-card .price .amount { font-size:56px; font-weight:700; }
.pricing-card .price .per { font-size:13px; font-weight:500; margin-left:4px; }
.pricing-card ul { list-style:none; padding:0; margin:28px 0 32px; width:100%; border-top:1px solid var(--divider); }
.pricing-card li { color:var(--astra-grey-2); font-size:15px; font-weight:300; padding:12px 0; border-bottom:1px solid var(--divider); }
.pricing-card .wp-block-button { width:100%; margin-top:auto; }
.pricing-note { text-align:center; color:var(--astra-grey-3); font-size:14px; margin-top:34px; }
.pricing-note a { color:var(--astra-red); font-weight:600; }

/* ---- INCLUDE / SERVICES / WHY ROWS ------------------------------------ */
.grid-include { display:grid; grid-template-columns:repeat(auto-fit,minmax(400px,1fr)); gap:40px 48px; margin-top:58px; }
.grid-services { display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:24px 44px; margin-top:58px; }
.grid-why { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:32px 44px; margin-top:56px; }
.row-item { display:flex; gap:22px; align-items:flex-start; }
.row-item.big { gap:24px; }
.row-item .icon-circle { flex:0 0 auto; border-radius:50%; border:2px solid var(--astra-red); color:var(--astra-red); display:inline-flex; align-items:center; justify-content:center; }
.row-item h3 { margin:5px 0 9px; color:var(--astra-white); font-size:17px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.row-item.big h3 { margin:6px 0 9px; }
.row-item p { margin:0; color:var(--astra-grey-3); font-size:14.5px; font-weight:300; line-height:1.7; }
.why-item { display:flex; gap:16px; align-items:flex-start; }
.why-item .check { flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--astra-red); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; margin-top:2px; }
.why-item h3 { margin:0 0 8px; color:var(--astra-white); font-size:15.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }
.why-item p { margin:0; color:var(--astra-grey-3); font-size:14.5px; font-weight:300; line-height:1.65; }

/* ---- STATS BAND ------------------------------------------------------- */
.stats-band { background: var(--astra-red-bright); color:#fff; padding:66px 24px; position:relative; z-index:1; }
.grid-stats { max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:28px; text-align:center; }
.grid-stats .num { font-size:clamp(38px,6vw,54px); font-weight:800; line-height:1; color:#fff; }
.grid-stats .label { margin-top:12px; font-size:12.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.92); }

/* ---- CONTACT ---------------------------------------------------------- */
.contact-grid { align-items:start; margin-top:52px; }
.astracom-site .contact-grid.wp-block-columns { gap:48px; align-items:flex-start; }
.wpcf7 .cf7-form { display:flex; flex-direction:column; gap:18px; }
.wpcf7 .field { display:flex; flex-direction:column; gap:8px; }
.wpcf7 .field label { color:var(--astra-grey-2); font-size:13px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; }
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 textarea { width:100%; background:transparent; color:#fff; border:1px solid var(--astra-border); border-radius:3px; padding:14px 16px; font-family:var(--font-sans); font-size:15px; outline:none; box-sizing:border-box; }
.wpcf7 input::placeholder, .wpcf7 textarea::placeholder { color:#6f6f6f; }
.wpcf7 input:focus, .wpcf7 textarea:focus { border-color:var(--astra-red); }
.wpcf7 .wpcf7-submit { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; background:var(--astra-red); color:#fff; border:2px solid var(--astra-red); font-weight:700; text-transform:uppercase; letter-spacing:0.14em; border-radius:999px; padding:17px 44px; font-size:14px; transition:background-color .18s ease; }
.wpcf7 .wpcf7-submit:hover { background:var(--astra-red-hover); border-color:var(--astra-red-hover); }
.wpcf7 .wpcf7-spinner { margin-left:12px; }
.wpcf7-not-valid-tip { color:#ffb4b4; font-size:12px; }
.wpcf7 form .wpcf7-response-output { border-color:var(--astra-red); color:var(--astra-grey-1); margin:18px 0 0; }
.contact-cards { display:flex; flex-direction:column; gap:16px; }
.info-card { background:var(--surface-card); border:1px solid var(--divider); padding:20px 22px; display:flex; gap:18px; align-items:center; }
.info-card .icon-circle { flex:0 0 auto; width:52px; height:52px; border-radius:50%; border:2px solid var(--astra-red); color:var(--astra-red); display:inline-flex; align-items:center; justify-content:center; }
.info-card .k { margin:0 0 3px; color:var(--astra-grey-2); font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; }
.info-card .v { margin:0; color:var(--astra-white); font-size:15px; word-break:break-word; }
.info-card a.v:hover { color:var(--astra-red); }

/* ---- FOOTER ----------------------------------------------------------- */
.site-footer { background:#131313; border-top:1px solid var(--divider); padding:64px 0 30px; position:relative; z-index:1; }
.site-footer__cols { max-width:var(--container); margin:0 auto; padding:0 24px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:40px; }
.site-footer .brand img { height:38px; width:auto; }
.site-footer .brand.wp-block-image { margin:0; }
.site-footer .brand-blurb { margin:18px 0 20px; color:var(--astra-grey-3); font-size:14px; font-weight:300; line-height:1.7; max-width:300px; }
.site-footer h5 { margin:0 0 12px; color:var(--astra-white); font-size:11.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; }
.site-footer h3 { margin:0 0 18px; color:var(--astra-white); font-size:12.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; }
.footer-pay { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.footer-pay img { height:26px; width:auto; background:#fff; border-radius:3px; padding:3px 5px; }
.site-footer .links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
.site-footer .links a { color:var(--astra-grey-3); font-size:14px; }
.site-footer .links a:hover { color:var(--astra-red); }
.site-footer .fcontact { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; color:var(--astra-grey-3); font-size:14px; font-weight:300; }
.site-footer .fcontact li { display:flex; gap:10px; align-items:center; }
.site-footer .fcontact .ic { color:var(--astra-red); display:inline-flex; }
.site-footer .fcontact a:hover { color:var(--astra-red); }
.social { display:flex; gap:12px; margin-top:18px; }
.social a { width:36px; height:36px; border:1px solid var(--divider); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:var(--astra-grey-2); }
.social a:hover { border-color:var(--astra-red); color:var(--astra-red); }
.site-footer__bottom { max-width:var(--container); margin:44px auto 0; padding:22px 24px 0; border-top:1px solid var(--divider); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center; }
.site-footer__bottom p { margin:0; color:var(--astra-grey-3); font-size:13px; }
.site-footer__bottom ul { list-style:none; margin:0; padding:0; display:flex; gap:22px; }
.site-footer__bottom a { color:var(--astra-grey-3); font-size:13px; }
.site-footer__bottom a:hover { color:var(--astra-red); }

/* ---- RESPONSIVE ------------------------------------------------------- */
@media (max-width: 900px){ .site-footer__cols { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); } }
@media (max-width: 782px){ .sec { padding:62px 0; } .grid-services { grid-template-columns:1fr; } .grid-include { grid-template-columns:1fr; } }

/* anchor scroll offset */
.astracom-site .sec, .astracom-site [id]{ scroll-margin-top: 80px; }

/* =======================================================================
   FIXES (v2): grid alignment, pricing height, anchor offset
   ======================================================================= */

/* 1+3+4. Neutralise the theme's flow block-gap margins on grid children so
   cards/items in every column line up on the same baseline. */
.astracom-site .grid-about > *,
.astracom-site .grid-plans > *,
.astracom-site .grid-include > *,
.astracom-site .grid-services > *,
.astracom-site .grid-why > * { margin-top: 0 !important; margin-bottom: 0 !important; }

/* keep each card/row stretched to equal height within its row */
.astracom-site .grid-about, .astracom-site .grid-plans { align-items: stretch; }
.astracom-site .grid-include > *, .astracom-site .grid-services > * { align-items: flex-start; }

/* 2. Pricing: compress cards so the section fits on one screen + pointer */
.grid-plans { margin-top: 40px; }
.pricing-card { padding: 26px 24px; cursor: pointer; }
.pricing-card h3 { font-size: 16px; }
.pricing-card .price { margin-top: 14px; }
.pricing-card .price .amount { font-size: 42px; }
.pricing-card .price .per { font-size: 12px; }
.pricing-card ul { margin: 18px 0 22px; }
.pricing-card li { padding: 8px 0; font-size: 14px; }
.pricing-card .wp-block-button__link { padding: 13px 22px; font-size: 13px; }
.sec--pricing { padding-top: 74px; padding-bottom: 74px; }
.sec--pricing .section-title .intro { margin-top: 16px; }

/* 5. Anchor offset so header links don't hide the section heading */
html { scroll-padding-top: 100px; scroll-behavior: smooth; }
.astracom-site [id], .astracom-site .sec { scroll-margin-top: 100px; }

/* pricing section padding via its anchor id */
#pricing { padding-top: 72px; padding-bottom: 72px; }
#pricing .section-title .intro { margin-top: 16px; }

/* anchor offset (final): use a single ~80px offset, not stacked, so header
   links land ~13% higher (just below the fixed header). */
.astracom-site [id], .astracom-site .sec { scroll-margin-top: 0; }
html { scroll-padding-top: 80px; }

/* nudge anchor landing 5px */
html { scroll-padding-top: 85px; }

html { scroll-padding-top: 75px; }