/*
Theme Name: Ollie Child
Theme URI: 
Description: Child theme for Ollie
Author: KSM Consulting
Author URI: 
Template: ollie
Version: 1.0.2
*/

/* Add your custom CSS below this line */


/*
Theme Name: Ollie Child
Description: KSM Consulting - Child theme for Ollie
Author: KSM Consulting
Template: ollie
Version: 1.0.0
*/

/* ==============================
   KSM CONSULTING - CUSTOM STYLES
   ============================== */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Button border radius */
.wp-block-button__link {
    border-radius: 6px !important;
    padding: 14px 28px !important;
    letter-spacing: 0.02em;
}

/* Coral accent button variant */
.wp-block-button.is-style-coral .wp-block-button__link {
    background-color: #F75C46 !important;
    color: #FFFFFF !important;
}

.wp-block-button.is-style-coral .wp-block-button__link:hover {
    background-color: #0D1B3E !important;
}

/* Remove default list styling in nav */
.wp-block-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Clean image rendering */
img {
    height: auto;
    max-width: 100%;
}


/****Style header button*********/

#modal-1-content > div > div > a.wp-block-button__link {
    font-weight: 600;
    transition: background-color 0.2s ease;
}

#modal-1-content > div > div > a.wp-block-button__link:hover {
    background-color: #FFFFFF !important;
    color: #0D1B3E !important;
}


/**************Space out header elements******************/

#modal-1-content > ul {
    column-gap: 1em;
    padding-right: 1em;
}


/***************Make footer menu responsive******************************************** */

@media screen and (max-width: 900px) {

body > div.wp-site-blocks > footer > div > div.wp-block-columns.alignwide.is-layout-flex.wp-container-core-columns-is-layout-010e51cd.wp-block-columns-is-layout-flex {
    display: none;
}

body > div.wp-site-blocks > footer > div.wp-block-group {
    padding-top: 0px !important;
}

body > div.wp-site-blocks > footer > div {
    padding-bottom: 63px !important;
}

}


/******************Home Page Hero img*************************/

#wp--skip-link--target > div > div.wp-block-group.alignfull.has-tertiary-background-color.has-background.has-global-padding.is-layout-constrained.wp-container-core-group-is-layout-13138de1.wp-block-group-is-layout-constrained {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

/*********BG img for section home page***********************/

/* #wp--skip-link--target > div > div:nth-child(3) > div > div:nth-child(1) {
    background: url(https://jeexinnovations.com/wp-content/uploads/2025/03/Home-Page-Top-Right-Image.jpg);
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    min-height: 672.72px;
} */

#wp--skip-link--target > div > div:nth-child(3) > div.wp-block-columns {
    column-gap: 0px;
}


/* Hero two-column row */

#ksm-hero-row {
    display: flex !important;
    align-items: stretch !important; /* Forces both columns to equal height */
}

/* Background image column */
#ksm-hero-row > div.wp-block-column.is-vertically-aligned-center.ksm-hero-image-col.is-layout-flow.wp-block-column-is-layout-flow {
    background: url(https://ksmconsulting.org/wp-content/uploads/2026/02/Home-Page-Digital-Steps-Column-BG-Image.jpg);
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    align-self: stretch;
}


/* Stack on mobile */
@media (max-width: 781px) {
    #ksm-hero-row {
        flex-direction: column !important;
    }

    #ksm-hero-row > div.wp-block-column.is-vertically-aligned-center.ksm-hero-image-col.is-layout-flow.wp-block-column-is-layout-flow {
        min-height: 300px !important; /* Give image visible height when stacked */
        width: 100% !important;
        order: 10;
    }
}


/***************Fixing spacing menu items spacing*****************/

[id^="modal-"] > ul {
    row-gap: 0px;
}


/******Eliminating spacing above footer for mobile view****************/

@media screen and (max-width: 900px) {

    body > div.wp-site-blocks > footer > div > hr.wp-block-separator {
    margin-top: 0px;
}

}


/************Mobile menu styles*********************/

/* Mobile menu overlay link colors */
.wp-block-navigation__responsive-container.is-menu-open {
    background-color: #FFFFFF !important; /* Overlay background */
    color: var(--wp--preset--color--ksm-text) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    color: var(--wp--preset--color--ksm-text) !important;
}

/* Hover state */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--ksm-blue) !important;
}

/* Close button color */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--ksm-text) !important;
}


@media screen and (max-width: 900px) {

    body > div.wp-site-blocks > footer > div > div.wp-block-group.alignwide.is-layout-flow.wp-block-group-is-layout-flow > div > nav.is-responsive {
    display: none;
}

}


#modal-1-content > ul > li.wp-block-navigation-item.has-sm-font-size.has-child.open-on-hover-click.wp-block-navigation-submenu > ul > li > a {
    color: var(--wp--preset--color--ksm-text);
}


/**************Remove margin lowest section About page************************/

#wp--skip-link--target > div > div.wp-block-group.alignfull.has-base-color.has-primary-background-color.has-text-color.has-background.has-global-padding.is-layout-constrained.wp-container-core-group-is-layout-9f65a5da.wp-block-group-is-layout-constrained {
    margin-bottom: 0px !important;
}

/***********Columns spacing on the Services page********************************/

#wp--skip-link--target > div.entry-content > div.wp-block-group > div.wp-block-columns.alignwide.is-layout-flex {
    column-gap: 2em;
}

#wp--skip-link--target > div.entry-content > div.wp-block-group > h2.wp-block-heading {
    margin-bottom: 1em;
}


/*styling contact form on Contact Us page */
form.wpcf7-form #cf-name {
	display: flex;
}

form.wpcf7-form #cf-first-name {
	padding-right: 1em;
}

form.wpcf7-form input[type=email], form.wpcf7-form input[type=number], form.wpcf7-form input[type=password], form.wpcf7-form input[type=reset], form.wpcf7-form input[type=search], form.wpcf7-form input[type=tel], form.wpcf7-form input[type=text], form.wpcf7-form input[type=url], form.wpcf7-form select, form.wpcf7-form textarea {
	border-color: black;
	color: black;
	border-radius:0px;
}

form.wpcf7-form input[type=submit] {
	border-radius: 10px;
}

form.wpcf7-form input::placeholder {
	color: #000;
}




form.wpcf7-form input[type=email]:focus, form.wpcf7-form input[type=number]:focus, form.wpcf7-form input[type=password]:focus, form.wpcf7-form input[type=reset]:focus, form.wpcf7-form input[type=search]:focus, form.wpcf7-form input[type=tel]:focus, form.wpcf7-form input[type=text]:focus, form.wpcf7-form input[type=url]:focus, form.wpcf7-form select:focus, form.wpcf7-form textarea:focus {
border: 1px solid black;
}

.wpcf7-submit {
font-family: FontAwesome !important;
}


form.wpcf7-form textarea {
  resize: none;
}

.wpcf7-form-control.wpcf7-textarea::placeholder {
    color: #000;
}

form.wpcf7-form input[type=submit] {
    border-radius: 5px;
    padding: 0.5em;
    background-color: var(--wp--preset--color--ksm-blue);
    color: #fff;
    border: 0px;
}

/********Client sites screenshots****************/

#wp--skip-link--target > div.entry-content.alignwide.wp-block-post-content.has-global-padding.is-layout-constrained.wp-block-post-content-is-layout-constrained > div > div > div.wp-block-column > div.wp-block-cover > img.wp-block-cover__image-background {

    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: var( --e-global-color-primary );
    border-radius: 25px 25px 25px 25px;
    box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.5);

}


@media screen and (max-width: 781px) {

    #wp--skip-link--target > div.entry-content.alignwide.wp-block-post-content.has-global-padding.is-layout-constrained.wp-block-post-content-is-layout-constrained > div > div > div:nth-child(1) {
    order: 10;
}

}


/*******Text color footer menu**************/

#modal-7-content > ul.wp-block-navigation__container > li.wp-block-navigation-item > a.wp-block-navigation-item__content {
    color: #d4d4ec;
}


#modal-8-content > ul.wp-block-navigation__container > li.wp-block-navigation-item > a.wp-block-navigation-item__content {
    color: #d4d4ec;
}



#modal-9-content > ul.wp-block-navigation__container > li.wp-block-navigation-item > a.wp-block-navigation-item__content {
    color: #d4d4ec;
}



/********Contact form field fit to container***************/

#wpcf7-f4287-p4279-o1 > form > p > span.wpcf7-form-control-wrap > input.wpcf7-form-control {
    width: 100%;
}

#wpcf7-f4287-p4279-o1 > form > p > span > textarea {
    width: 100%;
}

/***************Fix form submission response color******************/

#wpcf7-f4287-p4279-o1 > form > div.wpcf7-response-output {
    color: #fff;
}

/***************Syle sub menu*******************/

#modal-1-content > ul > li > ul.wp-block-navigation-submenu {
    border-radius: 0px;
    border-top-width: 2px !important;
    border-bottom-width: 0px !important;
    border-right-width: 0px !important;
    border-left-width: 0px !important;
    border-color: var(--wp--preset--color--ksm-blue) !important;
    border-style: solid !important;
}

/***Footer menu text color********/

#modal-2-content > ul > li > a {
    color: var(--wp--preset--color--main-accent) !important;
}

#modal-3-content > ul > li > a {
    color: var(--wp--preset--color--main-accent) !important;
}

#modal-4-content > ul > li > a {
    color: var(--wp--preset--color--main-accent) !important;
}


/*************Styling custom bullets on blog posts***********************/

#wp--skip-link--target > div.entry-content.alignwide.wp-block-post-content.has-global-padding.is-layout-constrained.wp-block-post-content-is-layout-constrained > ul > li::before {
    content: "" !important;
    position: absolute !important;
    left: 0;
    top: 0.75em;
    width: 20px;
    height: 20px;
    background-image: url('http://ksmconsulting.org/wp-content/uploads/2026/03/right.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block !important;
    transform: translateY(-50%);
}

#wp--skip-link--target > div.entry-content.alignwide.wp-block-post-content.has-global-padding.is-layout-constrained.wp-block-post-content-is-layout-constrained > ul > li {
    display: block;
    position: relative !important;
    padding-left: 30px !important;
}


/**************Setting image width on blog posts*************************/

#wp--skip-link--target > div.entry-content.alignwide.wp-block-post-content.has-global-padding.is-layout-constrained.wp-block-post-content-is-layout-constrained > figure > img {
    max-width: 100%;
    height: auto;
}


/*************Home page changes round2*******************/

p.home-banner-sub-text-2 {
    margin-top: 0px;
}


/* section.home-page-hero {
    background-image: linear-gradient(#00387358,#ff950158),url('http://ksmconsulting.org/wp-content/uploads/2024/05/AI-for-marketing.jpg');
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
} */

section.home-page-hero {
    background-image: linear-gradient(#00000095,#00000095), url('http://ksmconsulting.org/wp-content/uploads/2026/04/Hero-banner-img4.jpg');
    background-attachment: scroll;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -1px !important;
}

/*******************Setting button color*********************/

div.button-for-dark-bg, div.button-for-dark-bg> a {
    background-color: var(--wp--preset--color--ksm-blue);
    border-radius: 6px;
    color: var(--wp--preset--color--ksm-white);
}

div.button-for-dark-bg a:hover {
    background-color: var(--wp--preset--color--ksm-white);
    color: #0D1B3E;
    
}

/*********************Turning off rogue p tag on home page with no content but taking up a line space; this should NOT be a greedy selector as that would remove ALL blog text!!!*********************/

body.home #wp--skip-link--target > div.entry-content > p {
    display: none;
}


div.feature-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 16px rgba(13, 27, 62, 0.08);
    border: 1px solid rgba(13, 27, 62, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
}

div.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(13, 27, 62, 0.15);
    border-color: rgba(70, 127, 247, 0.2);
}


/************************Methodology using grid for smaller widths****************************************/

@media screen and (min-width: 1451px) {

body:not(.block-editor-page) div.methodology-grid {
    display: none;
}

body:not(.block-editor-page) figure.methodology-img {
        display: block;
}

}


@media screen and (max-width: 1450px) {

body:not(.block-editor-page) div.methodology-grid {
    display: grid;
    margin-top: 48px;
    margin-bottom: 48px;
}

body:not(.block-editor-page) figure.methodology-img {
    display: none;
}

}

body.block-editor-page div.methodology-grid, body.block-editor-page figure.methodology-img {
    display: block;
}


/********************Removing border around methodology container*********************************/

div.ksm-methodology-container {
    border: 0px;
}



/****************Menu link hover colors***********************/

.wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--ksm-blue) !important;
    transition: color 0.2s ease;
}

.wp-block-navigation-item__content {
    transition: color 0.2s ease !important;
}


/*************Targeting all secondary buttons*****************/

/* Secondary button variants — purple/violet */
:root [class*="is-style-secondary-button"] .wp-block-button__link {
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--ksm-white) !important;
    transition: background-color 0.2s ease !important;
}

/* Hover — darkens to navy for contrast */
:root [class*="is-style-secondary-button"] .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--ksm-navy) !important;
    color: var(--wp--preset--color--ksm-white) !important;
}


/*********Styling Get Started Button home page **************/

div.get-started-button a {
    background-color: var(--wp--preset--color--ksm-blue);
}


div.get-started-button a:hover {
    background-color: var(--wp--preset--color--ksm-white);
    color: #0D1B3E;

}



/* ==============================
   KSM STICKY HEADER
   ============================== */

/* Base sticky behavior */
.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    transition: background-color 0.3s ease, 
                backdrop-filter 0.3s ease,
                box-shadow 0.3s ease !important;
}

/* Scrolled state — applied via JS */
.site-header.scrolled {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2) !important;
}

/* At top of page — fully opaque navy */
.site-header.at-top {
    background-color: var(--wp--preset--color--ksm-navy) !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

/***Turn off child divs BG that were interfering***********/

header.site-header.wp-block-template-part.scrolled > .wp-block-group.alignfull.ksm-website-header.has-ksm-white-color.has-ksm-navy-background-color.has-text-color.has-background.has-link-color.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained {
    background-color: transparent !important;
}

header.site-header.wp-block-template-part.scrolled > .wp-block-group.alignfull.ksm-website-header.has-ksm-white-color.has-ksm-navy-background-color.has-text-color.has-background.has-link-color.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained > div.wp-block-group.has-ksm-navy-background-color {
    background-color: transparent !important;
}

/*****************************************Making menu link text visible against white BG*******************************************/

/****Removed a on scroll style as no longer needed instead it was hiding sub-menu items***************/

/* .site-header.scrolled .wp-block-navigation-item__content, .site-header.scrolled .wp-block-site-title a {
    color: #FFFFFF !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
} */


/* Fix FOUC — navy set server-side before JS loads */
.ksm-header-ready .site-header {
    background-color: var(--wp--preset--color--ksm-navy) !important;
}

/* Scrolled state — add semi-transparent navy */
.ksm-header-ready .site-header.scrolled {
    background-color: rgba(13, 27, 62, 0.4) !important;
}