/*
 * Noosfera Blocks — Global Tokens & Utilities
 * Source of truth for Figma tokens used across all patterns/blocks.
 * Scope: global custom properties live on :root, while a safe namespace
 * (.noosfera, [data-noosfera]) is provided if you prefer local scoping later.
 */

/* -----------------------------------------------------------
   1) RAW FIGMA TOKENS (as custom properties)
   ----------------------------------------------------------- */


:root {
  /* Colors (from your theme.json palette) */
  --fig-color-brand:           #9F7BCD;   /* Brand */
  --fig-color-brand-alt:       #C9B0E3;   /* Brand Alt */
  --fig-color-surface:         #FFFFFF;   /* Surface */
  --fig-color-surface-subtle:  #F9F8FB;   /* Surface Subtle */
  --fig-color-surface-accent1: rgba(244,242,254,0.80); /* #F4F2FECC */
  --fig-color-surface-inverse: #163578;   /* Inverse Surface (blue 900) */
  --fig-color-text:            #252831;   /* Text */
  --fig-color-text-title:      #252831;
  --fig-color-text-muted:      #596480;   /* Text Muted */
  --fig-color-on-inverse:      #F4F2FE;   /* On Inverse */
  --fig-color-border:          #E6E8EF;   /* Border */
  --fig-color-blue-700:        #467FF7;   /* Blue 700 */
  --fig-color-blue-900:        #163578;   /* Blue 900 */

  /* Gradients (Figma) */
  --fig-gradient-lavender-fade: linear-gradient(90deg, #E9DEF400 0%, #E9DEF4FF 100%);

  /* Typography families (Astra integration as fallbacks) */
  --fig-font-serif-display: var(--ast-heading-font-family, Georgia, serif);
  --fig-font-sans:          var(--ast-body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);

  /* Typography sizes/line-heights (common tokens) */
  --fig-font-size-subtitle: 18px;
  --fig-line-height-subtitle: 24px;
  --fig-font-size-paragraph-small: 14px;
  --fig-font-size-paragraph-large: 16px;
  --fig-font-size-meta-small: 13px;

  /* Typography weights/letter-spacing (missing in WP presets) */
  --fig-font-weight-subtitle: 600; /* SemiBold */
  --fig-letter-spacing-subtitle: 0;

  /* Headings – example from your custom h6 */
  --fig-h6-size: 20px;
  --fig-h6-line-height: 24px;
  --fig-h6-weight: 700;
  --fig-h6-letter-spacing: -1%;

  /* Radii */
  --fig-radius-xs: 6px;
  --fig-radius-sm: 12px;
  --fig-radius-md: 16px;
  --fig-radius-lg: 18px;
  --fig-radius-pill: 999px;

  /* Shadows (used across cards/panels) */
  --fig-shadow-sm: 0 8px 18px rgba(22,53,120,.10);
  --fig-shadow-md: 0 10px 20px rgba(22,53,120,.10);
  --fig-shadow-lg: 0 14px 30px rgba(22,53,120,.10);

  /* Spacing scale (multipurpose) */
  --fig-space-1: 4px;
  --fig-space-2: 8px;
  --fig-space-3: 12px;
  --fig-space-4: 16px;
  --fig-space-5: 20px;
  --fig-space-6: 24px;
  --fig-space-7: 28px;
  --fig-space-8: 32px;

  /* Section paddings (sensible defaults) */
  --fig-section-pad-block: clamp(32px, 6vw, 96px);

  --nf-title-padding-block: clamp(32px, 5vw, 48px);
  --nf-title-padding-inline: clamp(32px, 6vw, 56px);

  --nld-font-weight-semibold: 700;
}



/* Optional: a namespace you can apply to a top wrapper if you want tighter scoping
   (e.g., <div class="noosfera">…</div>) */
/*
.noosfera {
  --fig-color-brand: #9F7BCD;
  ...
}
*/

/* -----------------------------------------------------------
   2) SEMANTIC TOKENS (map Figma → “meaningful” names)
   ----------------------------------------------------------- */
:root {
  --nf-color-primary:     var(--fig-color-blue-700);
  --nf-color-primary-ink: var(--fig-color-blue-900);
  --nf-color-ink:         var(--fig-color-text);
  --nf-color-muted:       var(--fig-color-text-muted);
  --nf-color-surface:     var(--fig-color-surface);
  --nf-color-surface-sub: var(--fig-color-surface-subtle);
  --nf-color-border:      var(--fig-color-border);

  --nf-radius-card: var(--fig-radius-md);
  --nf-shadow-card: var(--fig-shadow-lg);

  --nf-font-sans: var(--fig-font-sans);
  --nf-font-serif-display: var(--fig-font-serif-display);

  --nf-subtitle-size: var(--fig-font-size-subtitle);
  --nf-subtitle-lh:   var(--fig-line-height-subtitle);
  --nf-subtitle-w:    var(--fig-font-weight-subtitle);
  --nf-subtitle-trk:  var(--fig-letter-spacing-subtitle);
}

/* -----------------------------------------------------------
   3) WP PRESET BRIDGES (optional helpers)
   These do NOT overwrite WP presets; they just give you classes
   you can use in block settings (e.g., Background → class).
   ----------------------------------------------------------- */
.has-lavender-fade-gradient-background {
  background: var(--fig-gradient-lavender-fade);
}

.is-style-card-title,
.nf-title-h6 {
  /* font family: use your “title” face token, with safe fallbacks */
  /*font-family: var(--nf-font-serif-display, var(--fig-font-serif-display, Georgia, serif)); */

  font-weight: 700;                  /* Bold */
  font-size: var(  --fig-h6-size);                   /* Figma size */
  line-height: var(--fig-h6-line-height);                 /* Figma line height */
  letter-spacing: var( --fig-h6-letter-spacing);            /* -1% of 20px => -0.2px (CSS requires a length) */
  color: var(--fig-color-text-title, #252831); /* text/titles; fallback to hex */
  margin: 0;                         /* typical heading reset */
}

.is-subtitle {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var( --fig-color-text-title);
}


.is-paragraph-small {
    font-weight: 500;
    font-size: var(--fig-font-size-paragraph-small);
    color: var(--fig-color-text);
}

.is-paragraph-regular {
    font-weight: 500;
    font-size: var(--fig-font-size-paragraph-large);
    color: var(--fig-color-text);
}

/* Subtitle utility class (use on Paragraph/Heading when needed) */
.is-style-subtitle,
.u-subtitle {
  font-size: var(--nf-subtitle-size);
  line-height: var(--nf-subtitle-lh);
  font-weight: var(--nf-subtitle-w);
  letter-spacing: var(--nf-subtitle-trk);
  color : var(--fig-color-blue-900);
  margin: 0;
}

/* h6 token (if you want a global mapping; otherwise keep it per-pattern) */
h6, .h6 {
  font-size: var(--fig-h6-size);
  line-height: var(--fig-h6-line-height);
  font-weight: var(--fig-h6-weight);
  letter-spacing: var(--fig-h6-letter-spacing);
}

/* -----------------------------------------------------------
   4) CARD & PANEL BASE (shared look many patterns use)
   ----------------------------------------------------------- */
.nf-card,
.noosfera-panel {
  background: var(--nf-color-surface);
  border: 1px solid color-mix(in oklab, var(--nf-color-border) 100%, transparent);
  border-radius: var(--nf-radius-card);
  box-shadow: var(--nf-shadow-card);
}


/* Buttons – secondary fallback (when theme lacks secondary style) */
.is-style-button-secondary .wp-block-button__link {
  background: #fff;
  color: var(--nf-color-primary-ink);
  border: 1px solid color-mix(in oklab, var(--nf-color-primary-ink) 15%, transparent);
}
.is-style-button-secondary .wp-block-button__link:hover { background: #f8f9ff; }

/* -----------------------------------------------------------
   5) LIGHT UTILITIES
   ----------------------------------------------------------- */
.u-max-997 { max-width: 997px; margin-inline: auto; }
.u-no-pad  { padding: 0 !important; }
.u-no-gap  { gap: 0 !important; }

.u-text    { color: var(--nf-color-ink); }
.u-muted   { color: var(--nf-color-muted); }
.u-primary { color: var(--nf-color-primary); }

/* Background helpers (used by testimonial/faq patterns) */
.bg-surface-subtle { background: var(--nf-color-surface-sub); }
.bg-accent-1       { background: var(--fig-color-surface-accent1); }

/* -----------------------------------------------------------
   6) PATTERN WRAPPER NORMALIZATION
   Every pattern we ship gets the .noosfera-pattern class.
   ----------------------------------------------------------- */
.noosfera-pattern {
  --pattern-block-gap: clamp(12px, 2.2vw, 20px);
  --pattern-pad-block: var(--fig-section-pad-block);
  color: var(--nf-color-ink);
}
.noosfera-pattern .wp-block-buttons { gap: 12px; }
.noosfera-pattern a { color: var(--nf-color-primary); text-decoration: none; }
.noosfera-pattern a:hover { text-decoration: underline; }

/* Example: hero gradient fallback if theme.json preset missing */
.noosfera-pattern--hero:not(.has-lavender-fade-gradient-background) {
  background:
    radial-gradient(120% 140% at 10% 0%, #EBF2FF 0%, rgba(235,242,255,0) 46%),
    radial-gradient(120% 140% at 95% 100%, #F3E8FC 0%, rgba(243,232,252,0) 46%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.72));
}


.nf-block-padding-top {
  padding-top:100px;
}




.nf-cta-btn { 
	display: inline-flex;
	align-items: center;
	justify-content: center;

    width: fit-content;
    height: 55px;
    gap: 8px;
    opacity: 1;
    border-radius: 8px;
    padding-top: 10px;
    padding-right: 32px;
    padding-bottom: 10px;
    padding-left: 32px;
    border: 2px solid transparent;

    background:
        /* inner fill */
        linear-gradient(123.52deg, #DAE5F9 0%, #F3E8FC 71.89%) padding-box,
        /* gradient border */
        linear-gradient(156.8deg, #5688F5 0%, #999BFF 28.06%, #9747FF 78.35%) border-box;

    box-shadow: 0px 12px 12px -9px #0000002E;

    font-size: 18px;
    color: var(--fig-color-surface-inverse);
    font-weight: var(--nld-font-weight-semibold);
}

.nf-cta-btn .wp-block-button__link {
  width: 100% !important;
}

@media (max-width: 700px){
  .nf-cta-btn {
    width: 100% ;
  }
}


.nf-cta-btn:hover,
.nf-cta-btn:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 12px 24px rgba(35, 24, 73, 0.4);
  color: var(--fig-color-surface-inverse);
  font-weight: var(--nld-font-weight-semibold);
  font-size: 18px;
}


.nf-cta-btn .wp-block-button__link {
  display: inline-flex;
	align-items: center;
	justify-content: center;
  background: transparent;
  box-shadow: none;

    width: auto;
  
    gap: 8px;
    opacity: 1;
    border-radius: 8px;

    padding-right: 32px;
    padding-bottom: 12px;
    padding-left: 32px;
   

   

    font-size: 18px;
    color: var(--fig-color-surface-inverse);
    font-weight: var(--nld-font-weight-semibold);
}

.nf-cta-btn .wp-block-button__link:focus,
.nf-cta-btn .wp-block-button__link:active,
.nf-cta-btn .wp-block-button__link:hover {
    transform: translateY(-1px);
    color: var(--fig-color-surface-inverse);
    text-decoration: none;
    background: transparent;
}