/*
 Theme Name:   Kadence Child
 Theme URI:    https://www.kadencewp.com/
 Description:  A child theme for Kadence — fluid typography starter for Beaver Builder + WP PowerPack.
 Author:       Metaglyphics Web Development
 Author URI:   https://metaglyphics.com
 Template:     kadence
 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:  kadence-child
*/


/* ==========================================================================
   0. Font Families
   --------------------------------------------------------------------------
   Declared here so the child theme is self-contained. These mirror the
   selections in Kadence global settings — if you change the font there,
   update here too.
   ========================================================================== */

	/*body,
	.fl-rich-text,
	p, li, td, input, textarea, select {
	  font-family: "Manrope",system-ui,sans-serif;
	}

	h1, h2, h3, h4, h5, h6,
	.h1, .h2, .h3, .h4, .h5, .h6,
	.fl-heading-text {
	  font-family: "Cormorant Garamond",serif;
	}*/


/* ==========================================================================
   1. Type Scale 
   --------------------------------------------------------------------------
   Two scales by design:

   • Body scale — derived from a single base size + ratio. Use these for
     body, UI, and supporting text. Change --text-base or --scale to shift
     the entire body system.

   • Heading scale — explicit clamp() per level. Headings need a steeper
     fluid slope than body (h1 should grow far more than body between
     mobile and desktop), so they're tuned individually rather than derived.
   ========================================================================== */

:root {

  /* ----- Body scale (derived) ----- */
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16 → 18 */
  --scale:     1.2;

  --text-xs: calc(var(--text-base) / var(--scale) / var(--scale));
  --text-sm: calc(var(--text-base) / var(--scale));
  --text-md: var(--text-base);
  --text-lg: calc(var(--text-base) * var(--scale));
  --text-xl: calc(var(--text-lg) * var(--scale));

  /* ----- Heading scale (explicit, steeper slopes) ----- */
  --text-h1: clamp(2.5rem,  1.8rem + 2.5vw,  4rem);    /* 40 → 64 */
  --text-h2: clamp(2rem,    1.5rem + 1.8vw,  3rem);    /* 32 → 48 */
  --text-h3: clamp(1.75rem, 1.3rem + 1.2vw,  2.25rem); /* 28 → 36 */
  --text-h4: clamp(1.5rem,  1.2rem + 0.8vw,  1.75rem); /* 24 → 28 */
  --text-h5: clamp(1.25rem, 1.1rem + 0.5vw,  1.5rem);  /* 20 → 24 */
  --text-h6: clamp(1.1rem,  1rem   + 0.3vw,  1.25rem); /* ~18 → 20 */

  /* ----- Line heights ----- */
  --lh-tight:   1.1;   /* h1, h2 */
  --lh-snug:    1.25;  /* h3-h6 */
  --lh-relaxed: 1.6;   /* body */

  /* ----- Letter spacing ----- */
  --ls-tight: -0.02em;  /* large headings */
  --ls-snug:  -0.01em;  /* mid headings */
  --ls-wide:   0.08em;  /* eyebrow / labels */
	
	
  /* Subhead — Playfair italic. Sits between h4 and body.
     Use .subhead class, not a bare <h4>, for this role. */
  --text-subhead: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); /* ~18 → 22px */
	
}




/* ==========================================================================
   2. Base
   ========================================================================== */

body {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.entry {
	box-shadow: none !important;
}


.header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a {
    color: #4A5568;
}
.header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a:hover {
	color: #d3b981;
}

/* ==========================================================================
   3. Headings
   ========================================================================== */

h1, .h1 { font-size: var(--text-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2, .h2 { font-size: var(--text-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h3, .h3 { font-size: var(--text-h3); line-height: var(--lh-snug);  letter-spacing: var(--ls-snug);  }
h4, .h4 { font-size: var(--text-h4); line-height: var(--lh-snug);  letter-spacing: var(--ls-snug);  }
h5, .h5 { font-size: var(--text-h5); line-height: var(--lh-snug); }
h6, .h6 { font-size: var(--text-h6); line-height: var(--lh-snug); }


.hero .heading-title {
    font-weight: 500;
    font-size: clamp(2.5rem,  1.8rem + 2.5vw,  4rem);
    line-height: .95;
    letter-spacing: -.015em;
    margin: 24px 0 0;
}

.heading-title em {
    color: #A8884F;	
}

.heading.medium .pp-sub-heading {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.heading.medium-wide .pp-sub-heading {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.hero-buttons {
	
}

/*.button.menu-item,
.button.menu-item:hover {
	background: transparent;
	box-shadow: none;
}*/



/* ==========================================================================
   4. Body & Supporting Text
   --------------------------------------------------------------------------
   No max-width on <p> by default — that breaks page-builder columns.
   Use the .prose / .measure utility on a wrapping container when you
   actually want long-form line-length capping.
   ========================================================================== */

p       { font-size: var(--text-base); }
.small  { font-size: var(--text-sm); }
.caption{ font-size: var(--text-xs); opacity: 0.75; }


/* ==========================================================================
   5. UI / Utility Classes
   ========================================================================== */

.lead {
  font-size: var(--text-lg);
  line-height: 1.5;
}

.eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: 600;
}

.button-text {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.nav-text {
  font-size: var(--text-sm);
}

.meta {
  font-size: var(--text-xs);
  opacity: 0.7;
}

/* Opt-in reading-measure utility. Apply to a CONTAINER (not <p>) when
   you want long-form prose to cap its line length. */
.prose,
.measure {
  max-width: 65ch;
}


.mission-card {
    position: relative;
    background: #000000;
    border-radius: 12px;
    padding: 60px 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mission-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
}

.card-number {
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 12rem;
    font-weight: 100;
    color: rgba(212, 185, 129, 0.15) !important;
    line-height: 1;
    pointer-events: none;
    font-family: 'Georgia', serif;
}


.app-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	
	}

.app-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
}



/* Italic serif subhead — replaces the "H4 at 17px" from the style guide.
   Use on <p> or <div>, not on heading tags. */
.subhead {
  font-family: "Cormorant Garamond",serif;
  font-size: var(--text-subhead);
  font-style: italic;
  font-weight: 400;
  line-height: var(--lh-snug);
  color: inherit;
}

/* Scripture pullquote — gold left bar, italic serif */
.pullquote {
  font-family: "Cormorant Garamond",serif;
  font-size: var(--text-lg);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  padding-left: 1.25rem;
  border-left: 3px solid #D3B981;
  margin: 2rem 0;
}

.pullquote-ref {
  font-family: "Manrope",system-ui,sans-serif;
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: #A8925A;
  margin-top: 0.75rem;
  display: block;
}


/* ==========================================================================
   6. Beaver Builder — Module Hooks
   --------------------------------------------------------------------------
   Maps BB modules to the type scale so they track the system unless
   explicitly overridden in the builder UI.
   ========================================================================== */

.fl-heading.fl-heading-default-h1 .fl-heading-text { font-size: var(--text-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.fl-heading.fl-heading-default-h2 .fl-heading-text { font-size: var(--text-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.fl-heading.fl-heading-default-h3 .fl-heading-text { font-size: var(--text-h3); line-height: var(--lh-snug);  letter-spacing: var(--ls-snug);  }
.fl-heading.fl-heading-default-h4 .fl-heading-text { font-size: var(--text-h4); line-height: var(--lh-snug);  letter-spacing: var(--ls-snug);  }
.fl-heading.fl-heading-default-h5 .fl-heading-text { font-size: var(--text-h5); line-height: var(--lh-snug); }
.fl-heading.fl-heading-default-h6 .fl-heading-text { font-size: var(--text-h6); line-height: var(--lh-snug); }

.fl-rich-text {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
}

.fl-button-wrap .fl-button {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}


/* ==========================================================================
   7. WP PowerPack — Module Hooks
   ========================================================================== */
.pp-heading-prefix {
  color: rgb(168, 136, 79);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: 400;	
  display: inline-flex;
	align-items: center;
	gap: 10px;
}
.pp-heading-prefix::before {
    content: "";
    width: 22px;
    height: 1px;
    background: rgb(168, 136, 79);
    display: block;
    opacity: .7;
}


.pp-info-box-title,
.pp-info-list-title,
.pp-pricing-table-title {
  font-size: var(--text-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
}

.pp-info-box-description,
.pp-info-list-description {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
}

.pp-button {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.tribe-events-content a
{
	background-color: #5C2A3A;
    border-color: #5C2A3A;	
    color: rgb(255, 255, 255);
    position: relative;
    vertical-align: middle;	
    transition: all .1s linear;
	transition-duration: 200ms;
	padding: 10px 20px;
	border-radius: 999px;	
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
	margin-top: 1em;
	display: inline-block;
}

.tribe-events-content a:hover {
    background-color: #1A1714;
    border-color: #1A1714;	
	color: #fff;
}



/* ==========================================================================
   End starter — add project-specific styles below this line.
   ========================================================================== */


.heading .pp-heading-content .pp-heading .heading-title  {
    font-weight: 500;
    font-size: clamp(40px,4.8vw,72px) !important;
    line-height: .95;
    letter-spacing: -.015em;
    padding: 24px 0 24px;
}


/* ==========================================================================
   Callout - Use CTA Block with class .callout
   ========================================================================== */
.fl-module.callout {
    border: 1px solid rgba(244,236,221,.18);
    background: rgba(244, 236, 221, .04);
    padding: 30px 32px;
    position: relative;
}

.fl-module.callout::before {
    content: "";
    position: absolute;
    left: -1px;
    top: -1px;
    width: 36px;
    height: 1px;
    background: #C8A772;
}

.fl-module.callout .mg-cta-text {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1.5;
    color: rgba(244, 236, 221, .85);
}

.fl-module.callout .mg-cta-description {
    margin-top: 14px;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #C8A772;
}



/*Heading widths*/
.narrow .fl-module-content {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.narrow .pp-sub-heading {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}