/**
Theme Name: GravityStack
Author: GravityStack Marketing Inc.
Author URI: https://www.gravitystack.ca
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gravitystack
Template: astra
*/
/* ==========================================================================
   TOKENS / ROOT VARS
   ========================================================================== */

:root {
  /* Brand palette */
  --green: #8EB957;
  --gs-green-soft: #F2F9F2;
  --gs-gray-soft:  #E0E0E0;
  --charcoal: #49494A;
  --charcoal-rgb: 73, 73, 74; /* from #49494A */
  --amber: #E67E22;
  --red: #C0392B;
  --light-amber: #FFC050;
  --pale-amber: #FFE5B4;
  --black: #000000;
  --white: #FFFFFF;
  --gs-gray-hairline: #E0E0E0;
  --gs-surface: #F7F7F7;      /* very light neutral background */
  --gs-surface-alt: #F2F9F2;  /* soft green tint, already defined */

  /* GRAVITY UI tokens (non-colour) */
  --gs-rad: 16px;
  --gs-rad-md: 10px;
  --gs-shadow: 0 10px 30px color-mix(in srgb, var(--black), transparent 94%);
  --gs-focus: 0 0 0 3px color-mix(in srgb, var(--green), transparent 65%);
  
  --gs-text-muted: color-mix(in srgb, var(--charcoal) 85%, white);

  --gs-wrap: 1100px;
  --gs-wrap-narrow: 920px;

  --gs-pricing-col-left: 1.2fr;
  --gs-pricing-col-right: .8fr;
  --gs-pricing-gap: 36px;

  --gs-check-indent: 24px;
  --gs-check-size: 16px;
  --gs-check-tick-w: 9px;
  --gs-check-tick-h: 5px;

  --gs-chip-font: 12px;
  --gs-badges-row: 30px;
  
  /* Base text */
  --fs-body: 1rem;

  /* Downscale */
  --fs-body-sm: 0.9rem;   /* “slightly smaller than body” */
  --fs-body-xs: 0.8rem;   /* micro / helper / disclaimers */

  /* Upscale */
  --fs-heading-sm: 1.2rem; /* card headings, small section headings */
  --fs-heading-md: 1.4rem; /* section headings */
  --fs-heading-lg: 1.8rem; /* hero-ish */
  --fs-metric: 1.3rem;     /* numeric values in cards (between body and heading-sm) */
  
  /* SPACING */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  
  /* BADGES */
  --gs-badge-positive: var(--green);
  --gs-badge-neutral:  var(--charcoal);
  --gs-badge-negative: var(--red, #D13B3B); /* fallback if --red not defined */
  --gs-badge-white:    var(--white, #fff);
 
  /* VISUALS */
 --gs-service-visual-height: 180px;
  --gs-service-visual-img-height: 140px;
  
}


/* ==========================================================================
   BASIC SERVICE HEADERS
   ========================================================================== */

.service-name {
  display: block;            /* Ensures it appears on its own line */
  font-size: 24px;           /* Adjust size as needed */
  font-weight: bold;         /* Makes it stand out */
  color: var(--charcoal);    /* Subtle contrast */
  margin-bottom: 0;          /* Space between service name and headline */
}

.sub-head {
  font-size: 24px;
  margin: 0;
  padding-top: 20px;
}


/* ==========================================================================
   RESPONSIVE LINE BREAK CONTROL
   ========================================================================== */
/* Usage:
   <span class="line-break-mobile">...</span>  → breaks on mobile only
   <span class="line-break-desktop">...</span> → breaks on desktop only
*/

/* Creates a line break on mobile screens (≤ 768px) */
@media (max-width: 768px) {
  .line-break-mobile {
    display: block;
  }
}

/* Creates a line break on desktop screens (≥ 769px) */
@media (min-width: 769px) {
  .line-break-desktop {
    display: block;
    line-height: 1.2em;
  }
}


/* ==========================================================================
   CONTENT / PARAGRAPHS
   ========================================================================== */

.entry-content p {
  margin-bottom: 1em !important;
}


/* ==========================================================================
   WRAP-COPY: LIST INDENTATION
   ========================================================================== */

.entry-content .wrap-copy ul,
.entry-content .wrap-copy ol,
.entry-content .wrap-copy .wp-block-list {
  padding-inline-start: 1.6rem;
  margin: 0 0 1rem 0;
  list-style-position: outside;
}

.entry-content .wrap-copy li {
  margin-block: 0.5rem;
  text-indent: 0;
}

/* Orphan fix */
.entry-content .wrap-copy p:last-of-type,
.entry-content .wrap-copy .wp-block-paragraph:last-of-type {
  clear: both;
}

/* Last-resort indent booster */
.entry-content .wrap-copy .wp-block-list,
.entry-content .wrap-copy ul,
.entry-content .wrap-copy ol {
  padding-inline-start: 1.6rem !important;
}


/* ==========================================================================
   BASIC TEXT UTILITIES
   ========================================================================== */

.yellow-marker {
  margin: 0 -0.4em;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  background-image: linear-gradient(
    to right,
    rgba(255, 225, 0, 0.1),
    rgba(255, 225, 0, 0.7) 4%,
    rgba(255, 225, 0, 0.3)
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


/* ==========================================================================
   HERO TYPOGRAPHY
   ========================================================================== */

.hero-text h1,
.hero-text h2 {
  font-size: 76px !important;
  font-weight: 700;
  line-height: 82px !important;
  color: inherit;
  margin: 0;
  padding: 0;
}

@media (max-width: 768px) {
  .hero-text h1,
  .hero-text h2 {
    font-size: 56px !important;
    line-height: 60px !important;
  }
}

.text-white {
  color: #ffffff !important;
}


/* ==========================================================================
   GLOBAL LIST SPACING
   ========================================================================== */

ul li,
ol li {
  margin-bottom: 6px;
}

.entry-content ul li {
  margin-bottom: 6px;
}


/* ==========================================================================
   GRAVITY DEFINITION (DISPLAY STYLE)
   ========================================================================== */

.gravity-definition {
  font-family: 'Comic Neue', 'Noto Sans', sans-serif;
  font-size: 48px !important;
  font-weight: 400;
  text-align: center;
  line-height: 52px !important;
  display: inline-block;
}


/* ==========================================================================
   HERO CTA BUTTON STACKING (MOBILE)
   ========================================================================== */

@media (max-width: 768px) {
  .hero-cta-button .uagb-buttons__wrap {
    flex-direction: column !important;
    gap: 12px;
    align-items: stretch;
  }

  .hero-cta-button .uagb-buttons__child {
    width: 100% !important;
    text-align: center;
  }
}


/* ==========================================================================
   TEXT + LIST WRAPPER
   ========================================================================== */

.text-with-list p + ul {
  margin-top: 8px;
}

.text-with-list ul {
  padding-left: 20px;
  margin-left: 0;
}

.text-with-list ul + p,
.text-with-list ol + p {
  margin-top: 16px;
}


/* ==========================================================================
   IMAGE WRAPPING
   ========================================================================== */
/*
  image-wrap-left          → float left, standard wrap
  image-wrap-right         → float right, standard wrap
  image-wrap-left-tight    → float left, closer text
  image-wrap-right-tight   → float right, closer text
  image-wrap-left-full     → float left, larger image
  image-wrap-right-full    → float right, larger image
  image-wrap-left-circle   → float left, circular wrap
  image-wrap-right-circle  → float right, circular wrap
*/

.image-wrap-left,
.image-wrap-right,
.image-wrap-left-tight,
.image-wrap-right-tight,
.image-wrap-left-full,
.image-wrap-right-full,
.image-wrap-left-circle,
.image-wrap-right-circle {
  width: min(38%, 420px);
  margin-bottom: 1rem;
  shape-margin: 6px;
}

@media (min-width: 992px) {
  .image-wrap-left {
    float: left;
    margin: 0 2rem 1rem 0;
    shape-outside: inset(0 round 24px);
  }

  .image-wrap-right {
    float: right;
    margin: 0 0 1rem 2rem;
    shape-outside: inset(0 round 24px);
  }

  .image-wrap-left-tight {
    float: left;
    width: min(35%, 380px);
    margin: 0 1rem 0.75rem 0;
    shape-outside: inset(0 round 14px);
  }

  .image-wrap-right-tight {
    float: right;
    width: min(35%, 380px);
    margin: 0 0 0.75rem 1rem;
    shape-outside: inset(0 round 14px);
  }

  .image-wrap-left-full {
    float: left;
    width: min(50%, 520px);
    margin: 0 2rem 1rem 0;
    shape-outside: inset(0 round 24px);
  }

  .image-wrap-right-full {
    float: right;
    width: min(50%, 520px);
    margin: 0 0 1rem 2rem;
    shape-outside: inset(0 round 24px);
  }

  .image-wrap-left-circle {
    float: left;
    width: min(32%, 320px);
    margin: 0 1.25rem 0.75rem 0;
    border-radius: 50%;
    shape-outside: circle();
  }

  .image-wrap-right-circle {
    float: right;
    width: min(32%, 320px);
    margin: 0 0 0.75rem 1.25rem;
    border-radius: 50%;
    shape-outside: circle();
  }
}

@media (max-width: 991.98px) {
  .image-wrap-left,
  .image-wrap-right,
  .image-wrap-left-tight,
  .image-wrap-right-tight,
  .image-wrap-left-full,
  .image-wrap-right-full,
  .image-wrap-left-circle,
  .image-wrap-right-circle {
    float: none !important;
    display: block;
    margin: 0 auto 1rem auto;
    width: 80%;
    max-width: 420px;
  }
}


/* ==========================================================================
   NUMBER CIRCLES / BADGE
   ========================================================================== */

.number-circle-light,
.number-circle-dark {
  display: inline-flex;
  width: 50px !important;
  height: 50px !important;
  max-width: 50px;
  max-height: 50px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 24px;
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Modifier for smaller circle */
.number-circle--small {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px;
  max-height: 34px;
  font-size: 18px !important;
  transform: translateY(-6px);
}

.essential-badge {
  display: block;
  width: 50%;
  max-width: 200px;
  margin: 0 auto 1rem auto;
  padding: 6px 12px;
  text-align: center;
  background-color: var(--white);
  border: 2px solid var(--green);
  color: var(--green);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 9999px;
}

.number-circle-dark {
  background-color: #FFFFFF;
  color: #49494A;
}

.number-circle-light {
  background-color: #49494A;
  color: #FFFFFF;
}


/* ==========================================================================
   BUTTON CLEANUP (SPECTRA / ASTRA)
   ========================================================================== */

a.uagb-buttons-repeater.ast-outline-button:hover {
  text-decoration: none !important;
}


/* ==========================================================================
   COST BOX / PRICING SNIPPETS
   ========================================================================== */

.gravity-cost-box {
  max-width: 360px;
  padding: 1.5rem;
}

.gravity-cost-box h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: #333;
}

.cost-row {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
  font-size: 1rem;
  color: #333;
}

.cost-row .amount {
  font-weight: bold;
}

.cost-row .underline {
  text-decoration: underline;
}

.divider {
  border-bottom: 1px solid #ccc;
  margin: 0.4rem 0 0.6rem;
}

.cost-row.total .amount {
  font-size: 1.2rem;
  color: #2e7d32;
}

.cost-row.total .label {
  font-weight: bold;
}





/* ==========================================================================
   FAQ (DETAILS BLOCKS)
   ========================================================================== */

.wp-block-details {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 18px 24px;
  margin-bottom: 12px;
  background-color: #f9f9f9;
  transition: all 0.2s ease;
}

.wp-block-details[open] {
  background-color: #f4f4f4;
  border-left: 4px solid #8EB957;
  padding-left: 26px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.wp-block-details summary {
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  outline: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  transition: color 0.2s ease;
  line-height: 1.3;
}

.wp-block-details[open] summary {
  margin-bottom: 12px;
}

.wp-block-details summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 10px;
  color: #49494A;
  font-size: 1.1em;
  line-height: 1;
  transition: transform 0.2s ease, color 0.2s ease;
}

.wp-block-details[open] summary::before {
  content: '▾';
}

.wp-block-details summary:hover {
  color: #8EB957;
}

.wp-block-details summary:hover::before {
  transform: scale(1.1);
  color: #8EB957;
}

.wp-block-details p {
  margin-bottom: 1em;
  line-height: 1.6;
}

.wp-block-details ul {
  padding-left: 1.25em;
  margin-bottom: 1em;
}

.wp-block-details li {
  margin-bottom: 0.5em;
}


/* ==========================================================================
   SERVICE PAGES / MISC
   ========================================================================== */

.tm-symbol {
  font-size: 75%;
  vertical-align: super;
  color: inherit;
}