/*
Theme Name: NVYRO Blueprint
Theme URI: https://nvyro.com.au
Author: NVYRO Systems
Author URI: https://nvyro.com.au
Description: Premium dark-industrial block theme (Full Site Editing) for NVYRO Systems. Technical grid, cyan accent, spec-sheet precision. Design tokens are set in theme.json; this stylesheet handles the precise section styling. Edit content natively in the WordPress editor.
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nvyro-blueprint
*/

/* ============================================================
   NVYRO Blueprint — design tokens (mirror of theme.json)
   ============================================================ */
:root{
  --nv-bg:#0b0e11;
  --nv-surface:#10151a;
  --nv-text:#e8ecef;
  --nv-text-2:rgba(232,236,239,0.66);
  --nv-text-3:rgba(232,236,239,0.6);
  --nv-text-4:rgba(232,236,239,0.4);
  --nv-accent:#39c6d6;
  --nv-accent-h:#5fd6e4;
  --nv-hair:rgba(255,255,255,0.08);
  --nv-hair-2:rgba(255,255,255,0.1);
  --nv-mono:'IBM Plex Mono',ui-monospace,monospace;
  --nv-body:'Archivo',system-ui,sans-serif;
  --nv-display:'Archivo Expanded','Archivo',system-ui,sans-serif;
  /* Logo lockup: NVYRO wordmark in Virgo 01 (bundle the file — see @font-face
     below); Chakra Petch for the "SYSTEMS" mark. */
  --nv-wordmark:'Virgo 01','Archivo Expanded','Archivo',system-ui,sans-serif;
  --nv-sys:'Chakra Petch',system-ui,sans-serif;
  --nv-title:#9aacb0;            /* slogan separators */
  --nv-wm-size:36px;            /* the ONLY dial — whole lockup scales from this */
  --nv-pad-x:56px;
  --nv-max:1440px;
}

/* ---- base ---- */
body.wp-site-blocks,
body{
  background:var(--nv-bg);
  color:var(--nv-text);
  font-family:var(--nv-body);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--nv-accent);color:var(--nv-bg);}
a{color:inherit;text-decoration:none;}

/* ---- NVYRO wordmark font (Virgo 01) ----
   Drop the font file at assets/virgo-01.woff2 and this activates automatically.
   Until then the wordmark falls back to Archivo Expanded (see --nv-wordmark). */
@font-face{
  font-family:'Virgo 01';
  src:url('assets/virgo-01.woff2') format('woff2'),
      url('assets/virgo-01.ttf') format('truetype');
  font-weight:400 700;   /* single static file; 700 on NVYRO is synthesised (per spec §3) */
  font-style:normal;
  font-display:swap;
}

/* ---- layout helpers ---- */
.nv-section{
  padding-block:88px;
  border-bottom:1px solid var(--nv-hair);
}
.nv-section.nv-section--tight{padding-block:0;}
.nv-inner{
  max-width:var(--nv-max);
  margin-inline:auto;
  padding-inline:var(--nv-pad-x);
}

/* Neutralise WordPress's default block-gap margins on the direct children of our
   custom grid/flex layouts. WP adds `margin-block-start` to every child except the
   first; inside a CSS grid that shifts the non-first items and reveals gap
   backgrounds as bands. Our layouts space themselves via `gap`, so reset to 0. */
.nv-hero-grid > *,
.nv-2col > *,
.nv-why-grid > *,
.nv-cap-grid > *,
.nv-split > *,
.nv-domains > *,
.nv-specs > *,
.nv-cta > *,
.nv-btn-row > *{
  margin-block:0;
}

/* ---- typography utilities ---- */
.nv-eyebrow{
  font-family:var(--nv-mono);
  font-size:12px;
  letter-spacing:0.24em;
  color:var(--nv-accent);
  text-transform:uppercase;
  margin:0 0 18px;
}
.nv-h1{
  font-family:var(--nv-display);
  font-weight:700;
  font-size:clamp(48px,5.3vw,76px);
  line-height:1.02;
  letter-spacing:-0.01em;
  margin:0 0 26px;
}
.nv-h1--sm{font-size:clamp(40px,4.4vw,60px);line-height:1.04;}
.nv-h2{
  font-family:var(--nv-display);
  font-weight:600;
  font-size:clamp(30px,3vw,38px);
  line-height:1.12;
  margin:0;
}
.nv-lead{font-size:20px;line-height:1.55;color:var(--nv-text-2);margin:0;}
.nv-body-copy{font-size:17px;line-height:1.7;color:var(--nv-text-2);margin:0;}
.nv-body-copy strong{color:var(--nv-text);font-weight:600;}

/* ---- buttons ---- */
.wp-block-button.nv-btn-primary .wp-block-button__link,
a.nv-btn-primary{
  background:var(--nv-accent);
  color:var(--nv-bg);
  padding:16px 32px;
  border-radius:4px;
  font-weight:600;
  font-size:16px;
  font-family:var(--nv-body);
  transition:background .18s ease;
}
.wp-block-button.nv-btn-primary .wp-block-button__link:hover,
a.nv-btn-primary:hover{background:var(--nv-accent-h);}
.wp-block-button.nv-btn-ghost .wp-block-button__link,
a.nv-btn-ghost{
  background:transparent;
  color:rgba(232,236,239,0.85);
  border:1px solid rgba(255,255,255,0.22);
  padding:15px 32px;
  border-radius:4px;
  font-weight:500;
  font-size:16px;
  transition:border-color .18s ease,color .18s ease;
}
.wp-block-button.nv-btn-ghost .wp-block-button__link:hover,
a.nv-btn-ghost:hover{border-color:var(--nv-accent);color:var(--nv-accent);}

/* ============================================================
   Header / nav
   ============================================================ */
.nv-header,
.wp-site-blocks > header{
  position:sticky;top:0;z-index:20;
  background:rgba(11,14,17,0.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--nv-hair);
}
.nv-header .nv-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding-block:16px;
}
/* ============================================================
   NVYRO brand lockup  (per NVYRO_Brand_Lockup.md — em-based,
   one dial: --nv-wm-size. Mark = 0.780 × wordmark cap-height.)
   ============================================================ */
.nv-brand{display:flex;align-items:center;}
.nv-brandhead{display:inline-flex;flex-direction:column;align-items:stretch;text-decoration:none;}
.nv-lockup{
  display:flex;align-items:baseline;line-height:1;   /* mark baseline = cap baseline → mark fills cap-block */
  font-size:var(--nv-wm-size);   /* establishes the em basis */
  gap:.294em;                    /* 10px @ 34 */
}
.nv-logomark{
  width:.794em;height:.794em;    /* 27px @ 34 — cap-height */
  flex:0 0 auto;color:var(--nv-text);display:block;
}
.nv-logomark svg{width:100%;height:100%;display:block;fill:currentColor;overflow:visible;}
.nv-wm{display:flex;align-items:baseline;gap:.265em;}   /* 9px @ 34 */
.nv-wm b{
  font-family:var(--nv-wordmark);font-weight:700;
  font-size:1em;line-height:1;letter-spacing:.029em;    /* 1px @ 34 */
  color:var(--nv-text);
}
.nv-sysword{
  font-family:var(--nv-sys);font-weight:500;
  font-size:.588em;              /* 20px @ 34 */
  letter-spacing:.25em;          /* 5px — em is 20px here, not 34 */
  color:var(--nv-accent);
}
.nv-slogan{
  display:flex;justify-content:space-between;align-items:center;
  width:100%;                    /* pins slogan to lockup width */
  font-family:var(--nv-sys);font-weight:500;font-size:11px;
  letter-spacing:4px;text-transform:uppercase;color:var(--nv-text);
  margin-top:5px;
}
.nv-slogan .nv-sep{color:var(--nv-title);letter-spacing:0;font-weight:400;margin:0 .18em;}
@media (max-width:600px){
  :root{--nv-wm-size:24px;}
  .nv-slogan{display:none;}       /* <28px wordmark: lockup alone (spec §6) */
}
.nv-nav{display:flex;align-items:center;gap:36px;}
.nv-nav .wp-block-navigation{
  font-size:14px;font-weight:500;
}
.nv-nav .wp-block-navigation-item__content{color:rgba(232,236,239,0.72);}
.nv-nav .wp-block-navigation-item__content:hover{color:var(--nv-accent);}
.nv-nav .wp-block-navigation-item__content[aria-current],
.nv-nav .current-menu-item .wp-block-navigation-item__content{color:var(--nv-accent);}
/* "Get in touch" is a nav item styled as a button (so it collapses into the
   mobile hamburger instead of overflowing the header). */
.nv-nav .nv-navcta .wp-block-navigation-item__content,
.nv-nav .nv-navcta .wp-block-navigation-item__content[aria-current]{
  color:var(--nv-bg);background:var(--nv-accent);
  padding:10px 22px;border-radius:4px;font-weight:600;
}
.nv-nav .nv-navcta .wp-block-navigation-item__content:hover{background:var(--nv-accent-h);color:var(--nv-bg);}
/* mobile overlay */
.wp-block-navigation__responsive-container.is-menu-open{background:var(--nv-bg);}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{color:var(--nv-text);}
.wp-block-navigation__responsive-container.is-menu-open .nv-navcta .wp-block-navigation-item__content{color:var(--nv-bg);background:var(--nv-accent);}
.nv-nav .wp-block-navigation .wp-block-navigation__responsive-container-open,
.nv-nav .wp-block-navigation .wp-block-navigation__responsive-container-close{color:var(--nv-text);}

/* ============================================================
   Hero
   ============================================================ */
.nv-grid-bg{
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.035) 1px,transparent 1px);
  background-size:56px 56px;
}
.nv-hero{padding-block:100px 92px;}
.nv-hero .nv-hero-grid{
  display:grid;
  grid-template-columns:minmax(420px,1fr) minmax(400px,640px);
  gap:48px;align-items:center;
}
.nv-hero-grid > .wp-block-column{padding:0;}
.nv-hero .nv-btn-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px;}
.nv-hero img{width:100%;max-width:640px;margin-left:auto;display:block;border-radius:8px;box-shadow:0 24px 60px rgba(0,0,0,0.55);}

/* ============================================================
   Domain strip
   ============================================================ */
.nv-domains{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--nv-hair);
  max-width:var(--nv-max);margin-inline:auto;
}
.nv-domain p{margin:0;}
.nv-domain{
  padding:22px 32px;border-right:1px solid var(--nv-hair);
  font-family:var(--nv-mono);font-size:12.5px;letter-spacing:0.16em;
  color:rgba(232,236,239,0.55);text-transform:uppercase;
  display:flex;align-items:center;gap:12px;
}
.nv-domain:last-child{border-right:none;}
/* Align the strip's outer content to the page content column (var(--nv-pad-x)),
   so the first label lines up with the hero/section content and the last with the
   right margin, while inner cells keep their even 32px rhythm. */
.nv-domain:first-child{padding-left:var(--nv-pad-x);}
.nv-domain:last-child{padding-right:var(--nv-pad-x);}
.nv-domain::before{
  content:"";width:6px;height:6px;background:var(--nv-accent);
  display:inline-block;flex:none;
}

/* ============================================================
   Two-column heading + content (About / Why)
   ============================================================ */
.nv-2col{display:grid;grid-template-columns:400px 1fr;gap:64px;}
.nv-stack-20 > * + *{margin-top:20px;}

/* ---- Why cards ---- */
.nv-why-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--nv-hair);border:1px solid var(--nv-hair);
}
.nv-card-cell{background:var(--nv-bg);padding:32px;transition:background .18s ease;}
.nv-card-cell:hover{background:var(--nv-surface);}
.nv-card-no{font-family:var(--nv-mono);font-size:11px;color:rgba(232,236,239,0.35);margin:0 0 14px;}
.nv-card-title{font-weight:600;font-size:18px;margin:0 0 10px;color:var(--nv-text);}
.nv-card-body{font-size:14.5px;line-height:1.6;color:var(--nv-text-3);margin:0;}

/* ============================================================
   Capabilities
   ============================================================ */
.nv-cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.nv-cap-card{
  border:1px solid var(--nv-hair-2);border-radius:6px;padding:36px 32px;
  background:rgba(255,255,255,0.02);transition:border-color .18s ease;
}
.nv-cap-card:hover{border-color:rgba(57,198,214,0.5);}
.nv-cap-tag{font-family:var(--nv-mono);font-size:12px;color:var(--nv-accent);margin:0 0 20px;}
.nv-cap-title{font-weight:600;font-size:20px;margin:0 0 12px;color:var(--nv-text);}
.nv-cap-body{font-size:15px;line-height:1.6;color:var(--nv-text-3);margin:0;}

/* ============================================================
   Split (products teaser / product rows)
   ============================================================ */
.nv-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.nv-img-panel{
  background:linear-gradient(160deg,#10151a,#0b0e11);
  border:1px solid var(--nv-hair-2);border-radius:8px;
  padding:16px;display:flex;justify-content:center;overflow:hidden;
}
.nv-img-panel img{width:100%;max-width:100%;height:auto;border-radius:4px;display:block;}
.nv-link-accent{color:var(--nv-accent);font-weight:600;font-size:16px;transition:color .18s ease;}
.nv-link-accent:hover{color:var(--nv-accent-h);}

/* ---- spec rows ---- */
.nv-specs{display:flex;flex-direction:column;margin-top:8px;}
.nv-spec-row{
  display:flex;gap:16px;padding:14px 0;
  border-top:1px solid var(--nv-hair);font-size:15px;
}
.nv-spec-key{
  font-family:var(--nv-mono);font-size:12px;color:var(--nv-accent);
  width:110px;flex:none;padding-top:2px;letter-spacing:0.06em;
}
.nv-spec-val{color:rgba(232,236,239,0.72);}

/* ============================================================
   Bespoke panel
   ============================================================ */
.nv-bespoke{
  border:1px dashed rgba(57,198,214,0.4);border-radius:8px;
  padding:56px;text-align:center;
}
.nv-bespoke .nv-h2{max-width:680px;margin-inline:auto;}
.nv-bespoke .nv-body-copy{max-width:540px;margin:18px auto 36px;}

/* ============================================================
   CTA
   ============================================================ */
.nv-cta{display:flex;align-items:center;justify-content:space-between;gap:48px;padding-block:96px;}
.nv-cta .nv-h2{font-weight:700;font-size:clamp(30px,3vw,40px);line-height:1.15;max-width:none;}
.nv-cta .nv-h2 br{display:block;}
.nv-cta-accent{color:var(--nv-accent);}

/* ============================================================
   Footer
   ============================================================ */
.nv-footer,
.wp-site-blocks > footer{border-top:1px solid var(--nv-hair);border-bottom:none;}
.nv-footer .nv-inner{
  display:flex;justify-content:space-between;align-items:center;
  padding-block:26px;font-size:13px;color:var(--nv-text-4);gap:24px;
}
.nv-footer a:hover{color:var(--nv-accent);}
.nv-footer-links{display:flex;gap:24px;}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1250px){
  .nv-hero .nv-hero-grid{grid-template-columns:1fr;gap:48px;}
  .nv-hero img{margin-left:0;max-width:360px;}
  .nv-2col{grid-template-columns:1fr;gap:32px;}
}
@media (max-width:900px){
  :root{--nv-pad-x:28px;}
  .nv-section{padding-block:64px;}
  .nv-domains{grid-template-columns:1fr 1fr;}
  .nv-domain:nth-child(2){border-right:none;}
  .nv-domain:nth-child(3),.nv-domain:nth-child(4){border-top:1px solid var(--nv-hair);}
  .nv-why-grid{grid-template-columns:1fr;}
  .nv-cap-grid{grid-template-columns:1fr;}
  .nv-split{grid-template-columns:1fr;gap:36px;}
  .nv-split .nv-img-panel{order:-1;}
  .nv-cta{flex-direction:column;align-items:flex-start;gap:28px;}
  .nv-header .nv-inner{padding-block:14px;}
}
@media (max-width:600px){
  .nv-hero{padding-block:64px 56px;}
  .nv-bespoke{padding:36px 24px;}
  .nv-img-panel{padding:32px;}
}