/*
Theme Name:  Velivox Child
Theme URI:   https://velivox.app
Description: Child theme for Velivox — practice English by actually talking. Real-time AI conversation partner.
Author:      Velivox
Author URI:  https://velivox.app
Template:    astra
Version:     1.0.0
License:     GNU General Public License v2 or later
Text Domain: velivox-child
*/

/* ──────────────────────────────────────────────────────────────────────────
   IMPORTANT — PARENT THEME
   This child theme is set to `Template: astra`. If your installed parent
   theme is different (Blocksy, GeneratePress, Kadence, Neve …), change the
   `Template:` line above to that theme's folder slug, otherwise WordPress
   will not let you activate the child theme.
   ────────────────────────────────────────────────────────────────────────── */

/* =====================================================================
   VELIVOX — DESIGN TOKENS  (derived from the logo + app brand colours)
   Logo: deep-teal "V" petals · warm coral microphone · airy landscape
   ===================================================================== */
:root{
  /* Surfaces — light, airy, calm */
  --v-bg:          #F4F8F6;   /* soft mint-white page */
  --v-bg-soft:     #EAF2EF;   /* alternating section wash */
  --v-surface:     #FFFFFF;   /* cards */
  --v-surface-2:   #F7FBF9;   /* nested */

  /* Ink */
  --v-ink:         #112E29;   /* deep teal-charcoal headings */
  --v-text:        #2C443F;   /* body */
  --v-muted:       #5E736D;   /* secondary */
  --v-dim:         #8AA09A;   /* tertiary / captions */

  /* Brand — teal "V" petals */
  --v-teal:        #0F8C79;
  --v-teal-deep:   #0A6357;
  --v-teal-soft:   #E1F1ED;
  --v-teal-glow:   rgba(15,140,121,0.22);

  /* Accent — coral microphone */
  --v-coral:       #EC8A76;
  --v-coral-deep:  #D9694F;
  --v-coral-soft:  #FCEAE4;

  /* Lines */
  --v-line:        rgba(17,46,41,0.09);
  --v-line-soft:   rgba(17,46,41,0.05);

  /* Gradients */
  --v-grad:        linear-gradient(135deg,#13A18B 0%,#0A6357 100%);
  --v-grad-text:   linear-gradient(120deg,#0F8C79 0%,#19B49A 55%,#EC8A76 130%);
  --v-grad-warm:   linear-gradient(135deg,#F4F8F6 0%,#FCEAE4 100%);

  /* Shape & motion */
  --v-r:           20px;
  --v-r-lg:        28px;
  --v-r-pill:      999px;
  --v-shadow:      0 14px 40px rgba(11,71,63,0.10);
  --v-shadow-sm:   0 6px 18px rgba(11,71,63,0.07);
  --v-shadow-cta:  0 14px 30px rgba(15,140,121,0.28);
  --v-ease:        all .28s cubic-bezier(.22,.61,.36,1);

  --v-font: 'Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --v-nav-h: 72px;
}

/* ---- Reset & base ---- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--v-bg);
  color:var(--v-text);
  font-family:var(--v-font);
  font-size:16px;
  line-height:1.65;
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5{color:var(--v-ink);font-weight:800;line-height:1.18;margin:0;letter-spacing:-.02em;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}

/* ── Make theme/Gutenberg wrappers transparent + full-width so our
      edge-to-edge sections paint correctly on any parent theme ───────── */
#page,.site,#content,.site-content,.ast-container,.entry-content,
.page-content,.wp-block-post-content,.is-layout-constrained,
.is-layout-flow,.ct-container,.ct-container-fluid,.entry,
article,.post-inner,main,#primary{
  background:transparent !important;
  width:100% !important;
  max-width:100% !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
  border:none !important;
}

.v-container{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* ── Hide parent theme's default header & footer (Astra / Blocksy /
      GeneratePress / Kadence / Twenty*) — our custom ones replace them ── */
#ast-desktop-header,#masthead,.ast-desktop-header-wrap,.site-header-focus-item,
#colophon,.site-footer,.footer-widget-area,
.ct-header,#site-header,.site-footer-row,
.generate-header,.gen-sidebar-nav,.site-info,
.wp-block-template-part header,.wp-block-template-part footer,
header.wp-block-template-part,footer.wp-block-template-part{
  display:none !important;
}

/* Edge-to-edge landing sections regardless of parent container padding */
.v-section,.v-hero,.v-strip,.v-footer,.v-header{
  width:100% !important;
  max-width:none !important;
}

/* =====================================================================
   BUTTONS  (shared across home + inner pages via this child stylesheet)
   ===================================================================== */
.v-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--v-font);font-weight:700;font-size:15px;
  border:none;border-radius:var(--v-r-pill);cursor:pointer;
  text-decoration:none;transition:var(--v-ease);line-height:1;
  padding:15px 28px;white-space:nowrap;
}
.v-btn-primary{background:var(--v-grad);color:#fff;box-shadow:var(--v-shadow-cta);}
.v-btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(15,140,121,.36);color:#fff;}
.v-btn-ghost{background:var(--v-surface);color:var(--v-teal-deep);box-shadow:var(--v-shadow-sm);}
.v-btn-ghost:hover{transform:translateY(-2px);box-shadow:var(--v-shadow);color:var(--v-teal-deep);}
.v-btn-lg{padding:18px 36px;font-size:16px;}
.v-btn-sm{padding:11px 20px;font-size:14px;}

@media (max-width:768px){
  .v-container{padding:0 16px;}
  body{font-size:15px;}
}