/**
 * Theme Name: Hello RISE
 * Template: hello-elementor
 * Description: A starter theme for RISE Results projects
 * Author: RISE Results
 * Author URI: https://www.riseresults.com
 * Text Domain: hello-rise
 * Version: 1.1
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 */

/* ================================
   RISE BASE  
   ================================ */

/* Reset */
html { font-size: 16px; }
body { margin: 0; padding: 0; }

/* ================================
   TOKENS  */

:root {  

/* === CONTAINER SPACING === */    /* Set the default Elementor paddings = 0 (spacing comes from .section and .container) */
      --container-max: 72rem; /* 1152px */
      --container-pad-x: clamp(1rem, 3vw, 2rem);
    
  /* Section spacing */
      --section-pad-y: clamp(3rem, 6vw, 6rem);
      --section-pad-y-tight: clamp(2.5rem, 3vw, 1.5rem);
      --section-pad-y-hero: clamp(4rem, 8vw, 8rem);

  /* Vertical rhythm inside sections */
      --stack-gap: clamp(0.75rem, 1.5vw, 1.5rem);    
    
  /* Radius + shadow */
      --radius-sm: 0.375rem;
      --radius: 0.75rem;
      --radius-lg: 1.25rem;

      --shadow-sm: 0 1px 2px rgba(0,0,0,.08);
      --shadow:    0 6px 20px rgba(0,0,0,.10);
      --shadow-lg: 0 12px 40px rgba(0,0,0,.14);

      --surface: #fff;
      --surface-border: rgba(0,0,0,.08);

/* === HEADER === */
    --nav-height: 4.5rem;                   /* change per project */
    --header-gap: clamp(1rem, 2vw, 2rem);   /* spacing inside header */
    --header-pad-x: var(--container-pad-x);
    --header-z: 999;
    
        /* Buttons */
--button-pad-y: 0.95rem;
--button-pad-x: 1.4rem;
--button-radius: 0.2rem;
--button-min-w: 14rem;
--button-max-w: 18rem;
--button-line-height: 1.2;
--button-font-size: clamp(1rem, 0.95rem + 0.2vw, 1.15rem);
    
/* === RISE TYPOGRAPHY Scale: 1.2 (Minor Third) === */    
/* clamp(min, preferred, max) */
    
/* Type */     
      --body: 1rem;
      --body-sm: 0.9em;
      --body-xs: 0.78rem;
    
/* Text CHANGE FROM TITLE  style variables    
      --t1: clamp(2.2rem, 1.6rem + 2.2vw, 3rem);
      --t2: clamp(1.9rem, 1.45rem + 1.6vw, 2.5rem);
      --t3: clamp(1.6rem, 1.25rem + 1.2vw, 2.075rem);
      --t4: clamp(1.35rem, 1.15rem + 0.8vw, 1.728rem);
      --t5: clamp(1.15rem, 1.05rem + 0.5vw, 1.44rem);
      --t6: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); */
    
    /* TEST Text scale */
--t1: clamp(2.4rem, 1.95rem + 2.1vw, 3.4rem);
--t2: clamp(2rem, 1.7rem + 1.35vw, 2.6rem);
--t3: clamp(1.55rem, 1.35rem + 0.95vw, 1.95rem);
--t4: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
--t5: clamp(1.05rem, 1rem + 0.3vw, 1.18rem);
--t6: clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem);

/* Fluid line heights LEAVE IN ELEMENTOR FOR NOW 
      --lh-1: clamp(1.1, 1.05 + 0.3vw, 1.25);
      --lh-2: clamp(1.15, 1.1 + 0.3vw, 1.3);
      --lh-3: clamp(1.2, 1.15 + 0.25vw, 1.35);
      --lh-4: clamp(1.25, 1.2 + 0.2vw, 1.4);
      --lh-5: clamp(1.3, 1.25 + 0.15vw, 1.45);
      --lh-6: clamp(1.35, 1.3 + 0.1vw, 1.5); */
    
    --lh-1: 1.02;
--lh-2: 1.08;
--lh-3: 1.14;
--lh-4: 1.22;
--lh-5: 1.3;
--lh-6: 1.55;

/* ELEMENTOR GLOBAL TOKENS */
/* Core Brand Colors */
    --e-global-color-primary: #2f6590; /* Primary */
    --e-global-color-primary-subtle: #A2C5E2; /* Primary Subtle */
    --e-global-color-secondary: #3d3d3d; /* Secondary */
    --e-global-color-secondary-subtle: #F4A49A; /* Secondary Subtle */

/* Neutral Colors */
    --e-global-color-text: #3d3d3d; /* Main Text */
    --e-global-color-neutral-dark: #3d3d3d; /* Neutral Dark */
    --e-global-color-neutral-light: #edeeef; /* Neutral Light */

/* Interactive States */
    --e-global-color-accent: #3d3d3d; /* Accent */
    --e-global-color-focus: #3d3d3d; /* Focus */
    --e-global-color-hover: #fff8e9; /* Hover */

/* Overlay */
    --e-global-color-overlay: rgba(46, 35, 42, 0.14); /* Overlay */

     


/* ================================
   BASE TYPOGRAPHY TOKENS
   ================================ */
body {/*   /*   color: var(--e-global-color-text);
      line-height: var(--lh-6);
    }
p { margin: 0 0 1rem; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 1rem;  }

small, .text-sm, .caption, .text-xs, label, figcaption {margin: 0 0 0.05rem; } */
    
body {
  color: var(--e-global-color-text);
  line-height: var(--lh-6);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  margin: 0 0 1.1rem;
  line-height: var(--lh-6);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.75rem;
  text-wrap: balance;
}
    

small, .text-sm, .caption, .text-xs, label, figcaption {
  margin: 0 0 0.2rem;
  line-height: 1.35;
}    
    
    
    
/* Barred List */    
.callout ul{
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.callout li{
  display: grid;
  grid-template-columns: .5rem 1fr;
  gap: .75rem;
  align-items: start;
  margin-bottom: .65rem;
      font-size: 1rem;
  line-height: 1.5;
}

.callout li::before{
  content: "";
  width: .45rem;
  height: 1.25em;
  background: var(--e-global-color-secondary);
  border-radius: 3px;
}

 .callout li:hover{
  border-left-color: var(--e-global-color-primary);
}
/**/
    
    /* Let Elementor heading widgets inherit the H1–H6 typography */
.elementor-widget-heading .elementor-heading-title {
  font-family: inherit !important;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Utility Titles use when you need the LOOK without changing the HTML tag */
    .t1 { font-size: var(--t1); line-height: var(--lh-1);  }
    .t2 { font-size: var(--t2); line-height: var(--lh-2);  }
    .t3 { font-size: var(--t3); line-height: var(--lh-3);   }
    .t4 { font-size: var(--t4); line-height: var(--lh-4);   }
    .t5 { font-size: var(--t5); line-height: var(--lh-5);   }
    .t6 { font-size: var(--t6); line-height: var(--lh-6);   }

       /* Elementor Lists */
    :where(ul, ol) { margin: 0 0 1rem; padding-left: 1.2em; }
    :where(li) { margin: 0.35rem 0; }


    
    /* Buttons (accent) + enforce “no uppercase” */
  /*  :where(.elementor-button, button, .button, input[type="submit"]) {
        text-transform: none;
      letter-spacing: normal;
         
    } */
    
    :where(.elementor-button, button, .button, input[type="submit"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--button-min-w);
  max-width: var(--button-max-w);
  width: 100%;
  padding: var(--button-pad-y) var(--button-pad-x);
  line-height: var(--button-line-height);
  font-size: var(--button-font-size);
  text-align: center;
  text-transform: none;
  letter-spacing: -0.02em;
  border-radius: var(--button-radius);
  white-space: normal;
  text-wrap: balance;
}
    
    .section.s-cta .elementor-button-wrapper {
  text-align: center;
}

.section.s-cta .elementor-button {
  margin-inline: auto;
}
    
    .section.s-cta .elementor-button,
.home-cta .elementor-button {
  background: #efcf78;
  color: var(--e-global-color-primary);
  border: 1px solid transparent;
  box-shadow: none;
}

    .section.s-cta .elementor-button:hover,
.home-cta .elementor-button:hover {
  background: #e7c25b;
  color: var(--e-global-color-primary);
}

.section.s-cta .elementor-button:focus,
.home-cta .elementor-button:focus {
  outline: 2px solid var(--e-global-color-primary);
  outline-offset: 2px;
}
/* ================================
   LAYOUT UTILITIES (Elementor-friendly)
   ================================ */
.container { 
  max-width: var(--container-max);
  margin-inline: auto;
  width: 100%;
  padding-inline: var(--container-pad-x);
}
.section .container { padding-inline: 0; } /* prevents double gutters */

.section > .container {
  max-width: var(--container-max);
  margin-inline: auto;
}

/* Row - Column - Wrap - Grow */
.flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stack-gap);
}

.flex.row { flex-direction: row; }
.flex.col { flex-direction: column; }

/* CARD UTILITY  */
    .section.s-cards { /* additive only */
      /* optional: tweak local gap, etc */
      /* --stack-gap: 1.25rem; */
    }   
    .card {   background: var(--surface);  border: 1px solid var(--surface-border);  border-radius: var(--radius); /* box-shadow: var(--shadow);  */padding: var(--stack-gap); }

/* Card variants */
    .card--sm { border-radius: var(--radius-sm); /* box-shadow: var(--shadow-sm); */ }
    .card--lg { border-radius: var(--radius-lg); /* box-shadow: var(--shadow-lg); */}
    .img-rounded { border-radius: var(--radius); overflow: hidden; }
  
  

  
/* VERTICAL RHYTHM */
.stack > * + * { margin-top: var(--stack-gap); }


/* ================================
   BASIC ELEMENT STYLES
   ================================ */

/* Links */
    a { color: var(--e-global-color-focus); text-decoration: none !important; }
    a:hover { color: var(--e-global-color-hover); }

/* Buttons 
    button, .button, .elementor-button {   }
    button:focus, .button:focus, .elementor-button:focus { outline: 2px solid var(--e-global-color-focus); }
    button:hover, .button:hover, .elementor-button:hover { background-color: var(--e-global-color-hover); }*/


/* ================================
   SEMANTIC NORMALS
   ================================ */
    address { font-style: normal; }
    figure {  margin: 0; }
    figcaption {  font-size: var(--body-sm);  line-height: 1.4;  margin-top: 0.5rem;}
    mark {  padding: 0 0.2em;  border-radius: var(--radius-sm);}
    details {  margin-block: 1rem;  border-radius: var(--radius-sm); } 
    summary {  cursor: pointer;  padding: 0.5rem 0.75rem;}



/* =========================================================
   REPEATED SECTION TYPES (additive)
   Use as classes in Elementor: section + s-*
   IDs optional for anchors only.
   ========================================================= */

/* Base section: only place you set padding */
.section {
      --section-pad-y-local: var(--section-pad-y);
      padding-block: var(--section-pad-y-local);
      padding-inline: var(--container-pad-x);
    }

/* Modifiers change the local variable */
    .section--tight { --section-pad-y-local: var(--section-pad-y-tight); }
    .section--hero  { --section-pad-y-local: var(--section-pad-y-hero); }

/* Section TYPES (semantic) map onto modifiers */

    /* HERO */
    .section.s-hero { --section-pad-y-local: var(--section-pad-y-hero); background: center center / cover no-repeat;
    min-height: 100vh}

    /* CCYO INTRO */
    .section.s-intro { --section-pad-y-local: var(--section-pad-y-tight); --stack-gap: 1.25rem;
        background-color: var(--e-global-color-primary);
    }
        .section.s-intro { --section-pad-y-local: var(--section-pad-y-tight); --stack-gap: 1.25rem;
    /* CCYO Brand */
        background-color: var(--e-global-color-primary-subtle);
    }

    /* LOGOS / TRUST */
    .section.s-logos { --section-pad-y-local: var(--section-pad-y-tight); }
    .section.s-logos img { max-height: 3rem; width: auto; opacity: .9; }

    /* FEATURE LIST */
    .section.s-feature-list {}

    /* FEATURE SINGLE */
    .section.s-feature-single {}

    /* SERVICES BOX */
    .section.s-servicesbox {}

    /* CTA */
    .section.s-cta { text-align: center; }

    /* PARALLAX / VISUAL BAND */
    .section.s-parallax {background: center center / cover no-repeat; height: 66vh}

    /* CARDS */
    .section.s-cards {}

    /* VIDEO */
    .section.s-video {}

    /* TAXONOMY / LISTING */
    .section.s-taxonomy {}




/* ================================
   HEADER / NAV (base, unbranded)
   ================================ */

#topnav, .top-bar,
#navbar, .nav-bar {
  min-height: var(--nav-height);
  display: flex;
  align-items: center;
  gap: var(--header-gap);
  padding-inline: var(--header-pad-x);
}

/* Typical pattern: top bar is shorter */
#topnav, .top-bar {
  min-height: calc(var(--nav-height) * 0.6);
}

/* “Push to the right” slot (use for search, buttons, etc.) */
#search, .nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}


/* ================================
   FORMS (base, unbranded)
   ================================ */

:where(input, textarea, select) {
  border: var(--field-border);
  border-radius: var(--field-radius);
  padding: var(--field-pad-y) var(--field-pad-x);
    color: var(--e-global-color-text);
  background-color: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

:where(input, textarea, select):focus {
  border-color: var(--e-global-color-focus);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--e-global-color-focus), transparent 75%);
}

/* Nice-to-have for textareas */
textarea { min-height: 8rem; }


/* ================================
   ALERTS (base, unbranded)
   ================================ */

.alert-success,
.alert-error {
  padding: var(--stack-gap);
  border-radius: var(--radius-sm);
  color: #fff;
}

.alert-success { background-color: var(--e-global-color-hover); }
.alert-error { background-color: var(--e-global-color-secondary); }


/* ================================
   DEV / EDITOR TWEAKS
   ================================ */

/* Elementor panel tweak (dev-only; remove if it ever confuses editing) */
#elementor-panel-category-pro-elements {
  display: none !important;
}

/*  DEBUG BORDERS 
header { border: 1px solid orange; }
main { border: 1px solid green; }
aside { border: 1px solid purple; }
section { border: 1px solid red; }
article { border: 1px solid blue; }
address { border: 1px solid pink; }
figure { border: 1px solid yellow; }
figcaption { border: 1px solid black; }
mark { border: 1px solid orangered; }
details { border: 1px solid teal; }
summary { border: 1px solid turquoise; }
footer { border: 1px solid brown; }
 --end debug borders */