/*
Theme Name: Uncode Child
Description: Child theme for Uncode theme
Author: Undsgn™
Author URI: http://www.undsgn.com
Template: uncode
Version: 1.0.0
Text Domain: uncode
*/

/* -- SET BODY FONT TO GENERAL SANS -- */

:root {

  /* TYPOGRAPHY */
  --font-mono: 'JetBrains Mono', monospace;
  /*--font-body: 'General Sans Regular', sans-serif;
  --font-medium: 'General Sans Medium';
  --font-semibold: 'General Sans Semibold';
  --font-bold: 'General Sans Bold';*/

  /* Uncode Child > Theme Options > Typography */

  --font-size-1: 68px; /* h1-h6 */
  --font-size-2: 57px;
  --font-size-3: 48px;
  --font-size-4: 34px;
  --font-size-5: 29px;
  --font-size-6: 24px;
  --font-size-7: 20px; /* Button */
  --font-size-8: 16px; /* Body lg, md, sm */
  --font-size-9: 14px;
  --font-size-10: 12px;
  
  /* line height */
  --line-height-default-plus-1: 1.75em; /*used to be 1.45em*/
  --line-height-default: 1.55em; /*used to be 1.45em*/
  --line-height-default-minus-1: 1.35em; /*used to be 1.45em*/
  --line-height-default-minus-2: 1.25em; /*used to be 1.45em*/
  --line-height-narrow-cols: 1.45em;
  
  /* letter spacing */
  --letter-spacing-button: -0.25px!important;
  --letter-spacing-default: -0.035em !important;
  --letter-spacing-menu: 0.035em;
  --letter-spacing-paragraph: -0.0em;
  --letter-spacing-eyebrow: 0.1em;



  /* COLORS */

  /* core */
  --shade-900: #121723;
  --shade-800: #1d2530;
  --shade-700: #303947;
  --shade-600: #424b58;
  --shade-500: #606775;
  --shade-400: #9199a6;
  --shade-300: #cbcfd6;
  --shade-200: #e1e3e8;
  --shade-100: #f1f2f5;
  --shade-50: #f9fafb;
  --shade-25: #EBEEF4;
  
  
  --core-accent-primary: #e11d48;
  --core-accent-primary-hover: var(--shade-600);
  --core-accent-lightblue: #483c68;
  --core-accent-darkblue: #2d273d;
  --core-white: #F3F6FB;
  --core-black: #111623;
  --white: #ffffff;

  /* text colors */
  --text-primary: var(--shade-900);
  --text-secondary: var(--shade-700);
  --text-tertiary: var(--shade-500);
  --text-quarternary: var(--shade-400);
  --text-inverse-primary: var(--core-white);
  --text-inverse-secondary: var(--shade-300);
  --text-inverse-tertiary: var(--shade-400);


  /* border colors */
  --border-color: var(--shade-300);
  --border-color-light: var(--shade-50);
  
  /* BORDER RADIUS & MARGIN & PADDING */
  --img-border-radius: 12px;
  --input-box-border-radius: 6px;

  --border-radius-xs: 4px;
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 20px;
  
  --shadow-xs: 0 4px 10px rgba(0, 0, 0, 0.02);
  --shadow-sm: 0 8px 30px 30px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 20px 20px rgba(0, 0, 0, 0.10);
  --shadow-mx: 0 16px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 20px 16px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 24px 24px rgba(0, 0, 0, 0.18);


  --space-xs: 12px;
  --space-sm: 18px;
  --space-md: 24px;
  --space-mx: 28px;
  --space-lg: 36px;
  --space-xl: 48px;

}

/*-- LINE SPACING --*/


/* Line spacing for mobile */
@media (max-width: 768px) {
    .narrow-cols,
    .child-cols-with-borders .wpb_column .uncode_text_column p {
        line-height: var(--line-height-default)!important;
    }
}

/* Line spacing for desktop */
@media (min-width: 769px) {
    .narrow-cols,
    .child-cols-with-borders .wpb_column .uncode_text_column p {
        line-height: var(--line-height-narrow-cols)!important;
    }
}

/*-- BUTTON --*/

/* Target all Uncode buttons */

.btn-container { margin-top: 24px!important; }

.btn,
.btn:not(.btn-custom-typo):not(.btn-inherit):not(.uncode-nav-container),
.btn-default,
.btn-custom-typo,
a.btn,
button.btn,
input[type="submit"].btn,
.wpcf7-submit {
  font-family: 'mundial', mundial, sans-serif !important;
  font-weight: 500 !important;
  font-size: var(--type-size-9)!important;
  letter-spacing: var(--letter-spacing-button)!important;
  text-transform: none !important;
  border-radius: var(--border-radius-xs)!important;
  padding: 10px 24px !important;
  transition: all 0.3s ease !important;
  border: none;

}

input.wpcf7-form-control.wpcf7-submit {
    margin-top: 1em!important;
}

/* Hover state */
.btn:hover,
.btn-default:hover,
.btn-container a.btn:hover,
.wpcf7-submit:hover,
.style-light .btn-default:not(.btn-hover-nobg):not(.icon-animated):not(.btn-flat):hover
 {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background-color: var(--core-accent-primary-hover)!important;
  color: var(--text-inverse-primary)!important;
}

.btn-container > a.btn-color-644601:not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):hover {
    background-color: var(--shade-500)!important;
    color: var(--text-inverse-primary)!important;
}

/* Specific button styles (optional) */
.btn, .btn-default {
  /*background-color: var(--shade-700)!important;*/
  color: #ffffff !important;

}

/* Button sizes (if needed) */

/* Large (lg) */
.btn.btn-lg,
input[type="submit"].btn.btn-lg,
.wpcf7-submit.btn.btn-lg {
  padding: 16px 40px !important;
  font-size: 18px !important;

}

.btn.btn-lg.btn-outline {
  padding: 10px 24px !important;
  font-size: var(--font-size-9)!important;
}

/* Small (sm) */
.btn-container a.btn-sm,
.btn-container a.btn-sm.btn:not(.btn-default-shape):not(.btn-round):not(.btn-square) {
  padding: 8px 20px 10px 20px !important;
  font-size: var(--font-size-8)!important;
}

.btn-container > a.btn-sm:hover,
.btn-container > a.btn-sm.btn:not(.btn-default-shape):not(.btn-round):not(.btn-square):hover {
    background-color: var(--shade-900)!important;
    color: var(--text-inverse-primary)!important;
    box-shadow: none!important;
}

.secondary.btn-sm {
    background-color: var(--shade-100);
    color: var(--text-primary)!important;
}

.btn-container a.btn-color-266205:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):hover,
.btn-container > a.btn.secondary.btn-sm:hover {
    /* grey-100 in Uncode */
    background-color: var(--shade-300)!important;
    color: var(--shade-900)!important;
    box-shadow: none!important;
    
}


.style-light .btn-container a.btn.btn-outline {
    border: 1px solid var(--shade-900)!important;
    color: var(--shade-900)!important;
    transition: color 200ms;
    padding: 10px 24px !important;
    font-size: var(--font-size-9)!important;
    cubic-bezier(0.785, 0.135, 0.15, 0.86), background-color 200ms
cubic-bezier(0.785, 0.135, 0.15, 0.86), border-color 200ms
cubic-bezier(0.785, 0.135, 0.15, 0.86);

}

.btn-container a.btn-sm.btn-outline.btn:not(.btn-default-shape):not(.btn-round):not(.btn-square)
 {
  border: 1px solid var(--shade-700)!important;
  border-radius: var(--border-radius-xs);
}

.btn-container a.btn.btn-outline.btn-dark-bg {
    border: 1px solid var(--shade-50)!important;
    color: var(--shade-50)!important;
    background: transparent;
    transition: color 200ms;
    cubic-bezier(0.785, 0.135, 0.15, 0.86), background-color 200ms
cubic-bezier(0.785, 0.135, 0.15, 0.86), border-color 200ms
cubic-bezier(0.785, 0.135, 0.15, 0.86);

}


/*-- HEADINGS --*/

h1, h2, h3 {
    font-family: ivypresto-headline, serif!important;
}

.single-portfolio h3, .single-portfolio .h3 {
    line-height: 1.3!important;
}

h4, h5, h6, h7, h8 {
    /*font-family: commuters-sans, 'Commuters Sans', sans-serif!important;*/
    font-family: mundial, sans-serif!important;
    letter-spacing: var(--letter-spacing-default)!important;
}

.h4, h4 {
    font-weight: 600;
}

.white-text div h2 span,
.white-text div h3 span,
.white-text p  {
    color: var(--white)!important;
}

.light-subhead > div > div > p {
    color: var(--text-secondary);
}

.uncont .has-foreword small.heading-foreword {
    display: block!important;
    font-family: "mundial", mundial, sans-serif;
    font-size: var(--font-size-8)!important;
    font-weight: 600;
}

.per-month {
    color: var(--text-quarternary)!important;
    font-size: var(--font-size-9)!important;
    font-family: "mundial", mundial, sans-serif!important;
    display: inline-block;
    margin-left: 4px;
    font-weight: 600!important;
    text-transform: lowercase;
}


.eyebrow p {
    font-family: var(--font-mono);
    color: var(--core-accent-primary);
    font-size: var(--font-size-9);
    text-transform: uppercase;
}

.eyebrow + .vc_custom_heading_wrap {
    margin-top: var(--space-xs)!important;
}

.child-cols-with-borders {
    
}

.vc_custom_heading_wrap + .uncode_text_column {
    margin-top: var(--space-sm)!important;
}

.single-portfolio .vc_custom_heading_wrap h3 + .text-lead > p {
    margin-top: var(--space-xl)!important;
    border-top: 1px solid var(--border-color);
    padding-top: var(--space-xs)!important;
    color: var(--text-secondary)!important;
}

.single-portfolio .vc_custom_heading_wrap h4 + .text-lead > p {
    margin-top: 0!important;
    margin-bottom: var(--space-xl);
}

.single-portfolio .vc_custom_heading_wrap h4 + .text-lead {
    margin-top: var(--space-sm);
}

.single-portfolio .caption {
    font-family: var(--font-mono);
}

.single-portfolio .wpb_raw_html table td {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--font-size-9);
}




/*-- POST GRID --*/



.grid-container .t-entry-text .t-entry:nth-child(2),
.grid-container .t-entry-text .t-entry .t-entry-title {
  /* Heading */
  font-family: mundial, sans-serif!important;
  margin-bottom: var(--space-md)!important;
  font-weight: 500;
  line-height: var(--line-height-default-minus-1); 
}

.grid-container .t-entry-text .t-entry .t-entry-excerpt p {
    font-size: var(--font-size-8)!important;
    line-height: var(--line-height-default);
    margin-bottom: var(--space-md)!important;
}




/*-- ROW STYLES --*/




.boxes {

    
}

.boxes .wpb_column .uncol {
    border-radius: var(--border-radius-sm);
    background-color: var(--white);
    box-shadow: var(--shadow-md);
    padding: var(--space-md) var(--space-md);
}

.boxes .wpb_column .uncol .uncode-text-column:first-child {
    
}

.boxes .wpb_column .uncol .uncode_text_column > p {
    font-size: var(--font-size-9);
    color: var(--text-primary);
    line-height: var(--line-height-narrow-cols);
    margin-top: var(--space-xs)!important;
}

.boxes .wpb_column .uncol .uncode_text_column {

    margin-top: var(--space-xs)!important;
}

.boxes.pricing {}

.boxes.pricing .primary-focus > .uncol {
    /*border: 2px solid #FFF1E1;*/

}

.check-mark.pricing::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('https://jonsimmonsco.stage.site/wp-content/uploads/2026/01/Artboard-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 8px;
    vertical-align: middle;
    color: var(--text-tertiary); 

}
ul.custom-bullets,
ul.custom-bullets.pricing {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0!important;
  margin-left: 0;
}

ul.custom-bullets li,
ul.custom-bullets.pricing li {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 25px;
  background-image: url('https://jonsimmonsco.stage.site/wp-content/uploads/2026/01/Artboard-1.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 16px 16px;
  margin-bottom: 10px;
  font-size: var(--font-size-9)!important;
}

.check-mark.pricing {
    padding-bottom: 10px;
        margin-bottom: 10px;
}

/* COUNTER */


.uncode-counter-wrap {}

.uncode-wrapper.uncode-counter-wrap > p { 
    color: var(--core-accent-primary);
    text-align: left!important; 
    font-size: var(--font-size-5)!important;
    font-family: 'Commuters Sans', commuters-sans, sans-serif;
}

.uncode-counter-wrap > p > span.counter-prefix {}

.uncode-counter-wrap > p > span.uncode-counter {}

.uncode-counter-wrap > p > span.counter-suffix {}

.uncode-counter-wrap > div.counter-text p { 
    color: var(--text-secondary)!important;
    margin-top: var(--space-xs);
    text-align: left!important;
    font-size: var(--font-size-9)!important;
     }

/* ICON BOX */

.icon-box {
    margin-top: 0px!important;
}

.icon-box > .icon-box-icon.fa-container > span {
    /*color: var(--text-primary)!important;*/
}

.icon-box > .icon-box-content {}

.icon-box > .icon-box-content > .icon-box-heading {}

.icon-box > .icon-box-content > .icon-box-heading h6 {
    margin-top: 8px;
}

.icon-box > .icon-box-content > p {
    color: var(--text-tertiary);
    margin-top: var(--space-xs);
    font-size: var(--font-size-9);
}  

  

/* COMPARISON TABLE */
.comparison-table {
    
}

.comparison-table .header-cell {
    /*background-color: var(--shade-50);*/
    color: var(--text-primary)!important;
    font-weight: 500!important;
}

.comparison-table .table-row:nth-child(even) {
    /*background-color: var(--shade-50);*/
}

.comparison-table .table-row:nth-child(odd) {

}

table.comparison-table td, table.comparison-table th {
  font-weight: 400;
  color: var(--text-tertiary);
}

.comparison-table .row-label {
    font-weight: 600!important;
    color: var(--text-primary)!important;
}

.comparison-section { 
    max-width: 1200px; 
    margin: 60px auto; 
    padding: 0 20px; 
}
.section-title { 
    text-align: left; 
    font-size: 2.5rem; 
    margin-bottom: 1rem; 
}
.section-subtitle { 
    text-align: left; 
    font-size: 1.125rem; 
    color: #666; 
    margin-bottom: 3rem; 
}

/* Grid layout */
.comparison-grid {
    display: grid;
    grid-template-columns: 30% 35% 35%;
    gap: 0;
    align-items: start;
}

/* All columns */
.labels-column,
.your-column,
.agency-column {
    display: flex;
    flex-direction: column;
}

/* Headers */
.header {
    padding: 20px;
    text-align: left;
    height: 48px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.your-column .header {
    justify-content: center;
}

/* Hide empty header but keep space */
.labels-column .header {
    visibility: hidden;
}

/* Items (rows) - EXACT HEIGHT FOR ALIGNMENT */
.label,
.item {
    padding: 24px 20px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    height: 72px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    font-size: var(--font-size-9);
}

.label {
    font-weight: 600;
}

.item span img {
    width: 16px;
    height: auto;
    vertical-align: middle;
    margin-right: 8px;
    display: inline-block;
    position: relative;
    top: -2px;
    flex-shrink: 0;
}

.agency-column .header, 
.agency-column .item {
    padding-left: 40px;
}

.agency-column .item span img {
    margin-right: 0px;
}

.agency-column .item .text {
    color: var(--text-tertiary);
}

.label span,
.item span {
    display: flex;
    width: 100%;
    gap: 6px;
    align-items: center;
    line-height: var(--line-height-narrow-cols);
}

/* Border above first row */
.label:first-of-type,
.item:first-of-type {
    border-top: 1px solid #e0e0e0;
}

/* Keep border below last row */
.label:last-child,
.item:last-child {
    border-bottom: 1px solid #e0e0e0;
}

/* Middle column container - soft greyscale shadow with padding */
.your-column-container {
    box-shadow: 
        -8px 0 24px -4px rgba(0, 0, 0, 0.12),
        8px 0 24px -4px rgba(0, 0, 0, 0.12);
    padding: 60px 0;
    margin: -60px 0;
    border-radius: 8px;
}

.your-column-container .header img { 
    width: 60px;
    height: auto;
    margin-bottom: 20px;
    
}


/*-- CF7 --*/


.wpcf7-form.init {  }

.wpcf7-form .wpcf7-form-control-wrap {  }

.wpcf7-form-control {
    width: 100%;
    box-sizing: border-box;
    padding: 15px; /* or whatever padding you want */
    border: 1px solid #ccc; /* or match your design */
}

.wpcf7-form p {
    margin-top: 10px!important;
}

input.wpcf7-form-control, textarea.wpcf7-textarea {
    background-color: var(--shade-800);
    border: none;
    border-radius: var(--input-box-border-radius);
    margin-top: 0px!important;
    color: var(--shade-50);

}

.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-textarea {
    /* width: 100%!important;
    max-width: 100%!important; */
    box-sizing: border-box!important;
}

div.wpforms-container-full button[type=submit]:not(:hover):not(:active) {
    background-color: var(--text-primary)!important;
}

.wpforms-submit-container button.wpforms-submit {
  font-family: 'General Sans Regular', sans-serif !important;
  font-weight: 600 !important;
  font-size: var(--type-size-9)!important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  border-radius: 100px !important;
  padding: 10px 24px !important;
  transition: all 0.3s ease !important;
  border: none!important;
  letter-spacing: var(--default-letter-spacing)!important;
  
}

.wpcf7-submit:hover
 {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background-color: var(--text-secondary)!important;
}

input[type="submit"].btn.btn-lg,
.wpcf7-submit.btn.btn-lg {
  padding: 16px 40px !important;
  font-size: 18px !important;
  letter-spacing: var(--default-letter-spacing)!important;
}

/* Submit button styled above with buttons */


/* Mobile responsive */
@media (max-width: 768px) {
    .comparison-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .agency-column {
        display: none;
    }
    
    .your-column-container {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
        border-radius: 8px;
        overflow: hidden;
        margin: 0;
    }
    
    .labels-column .header {
        display: none;
    }
    
    .label {
        font-weight: 600;
        padding-bottom: 8px;
    }
    
    .item::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        margin-bottom: 8px;
    }
}