/*
 Theme Name:   Cognition IP
 Theme URI:    https://cognitionip.com
 Description:  This is a child theme for Cognition IP. GeneratePress is used as the master theme to ensure compatibility with popular page builders and to receive future feature updates to the WordPress Core. All custom blocks are derived from a custom plugin and not this theme.
 Author:       Bryn Barker
 Author URI:   https://bigsystems.net
 Template:     generatepress
 Version:      1.2
*/

/* ==========================================
** Font family
** ========================================*/

@font-face {
    font-family: 'Euclid Circular B';
    src: url('/wp-content/themes/cognition_ip/fonts/EuclidCircularB/EuclidCircularB-400.woff2') format('woff2'),
        url('/wp-content/themes/cognition_ip/fonts/EuclidCircularB/EuclidCircularB-400.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Circular B';
    src: url('/wp-content/themes/cognition_ip/fonts/EuclidCircularB/EuclidCircularB-500.woff2') format('woff2'),
        url('/wp-content/themes/cognition_ip/fonts/EuclidCircularB/EuclidCircularB-500.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Circular B';
    src: url('/wp-content/themes/cognition_ip/fonts/EuclidCircularB/EuclidCircularB-600.woff2') format('woff2'),
        url('/wp-content/themes/cognition_ip/fonts/EuclidCircularB/EuclidCircularB-600.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ==========================================
** General styles
** ========================================*/

.cd-icon {
    --size: 1em;
    font-size: var(--size);
    height: 1em;
    width: 1em;
    display: inline-block;
    color: inherit;
    fill: currentColor;
    line-height: 1;
    flex-shrink: 0;
    max-width: initial;
}

.cd-icon use {
    /* SVG symbols - enable icon color corrections */
    color: inherit;
    fill: currentColor;
}

.back-to-top {
    --size: 50px;
    width: var(--size);
    height: var(--size);
    display: flex;
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    z-index: 10;
    border-radius: 50%;
    background-color: hsla(230, 13%, 9%, 0.9);
    visibility: hidden;
    opacity: 0;
    transition: 0.2s;
}

.back-to-top:hover {
    background-color: hsl(230, 13%, 9%);
}

.back-to-top .cd-icon {
    --size: 20px;
    display: block;
    margin: auto;
    color: hsl(0, 0%, 100%);
}

.back-to-top--is-visible {
    visibility: visible;
    opacity: 1;
}

.bg-pattern-1 {
    background-image: radial-gradient(
            circle at center center,
            transparent,
            rgb(255, 255, 255)
        ),
        repeating-linear-gradient(
                135deg,
                rgb(255, 255, 255) 0px,
                rgb(255, 255, 255) 10px,
                transparent 10px,
                transparent 11px
            ),
            repeating-linear-gradient(
                    45deg,
                    rgb(243, 243, 243) 0px,
                    rgb(243, 243, 243) 12px,
                    transparent 12px,
                    transparent 24px
                ),
                linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));
}

.bg-pattern-2 {
    background-image: repeating-linear-gradient(
            67.5deg,
            hsla(145, 0%, 97%, 0.2) 0px,
            hsla(145, 0%, 97%, 0.2) 0px,
            transparent 0px,
            transparent 1px,
            hsla(145, 0%, 97%, 0.2) 1px,
            hsla(145, 0%, 97%, 0.2) 4px,
            transparent 4px,
            transparent 5px,
            hsla(145, 0%, 97%, 0.2) 5px,
            hsla(145, 0%, 97%, 0.2) 8px
        ),
        repeating-linear-gradient(
                0deg,
                hsla(145, 0%, 97%, 0.2) 0px,
                hsla(145, 0%, 97%, 0.2) 0px,
                transparent 0px,
                transparent 1px,
                hsla(145, 0%, 97%, 0.2) 1px,
                hsla(145, 0%, 97%, 0.2) 4px,
                transparent 4px,
                transparent 5px,
                hsla(145, 0%, 97%, 0.2) 5px,
                hsla(145, 0%, 97%, 0.2) 8px
            ),
            linear-gradient(135deg, rgb(237, 237, 237), rgb(199, 199, 199));
}

.bg-orange-override {
    background: rgba(245, 137, 36, 1) !important;
}

.bg-green-override {
    background: rgba(37, 180, 115, 1) !important;
}

.blog-top-spacer:first-of-type div div {
    margin-top: 0 !important;
}

div.comments-area {
    display: none !important;
}

#fluentform_2_success.ff-message-success {
    color: #fff !important;
    background: rgba(31, 41, 55, 1) !important;
    border: 1px solid #fff !important;
    border-radius: 5px !important;
}

/* Headings within article */

.custom-blog-formatting h1 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.custom-blog-formatting h2 {
    font-size: clamp(1.5rem, 2vw + 1rem, 2rem); /* min: 24px, max: 32px */
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.custom-blog-formatting h3 {
    font-size: clamp(1.25rem, 1.5vw + 1rem, 1.5rem); /* min: 20px, max: 24px */
    margin-bottom: 1.2rem;
    font-weight: 600;
}

.custom-blog-formatting h4 {
    font-size: clamp(1.125rem, 1.2vw + 1rem, 1.25rem); /* min: 18px, max: 20px */
    margin-bottom: 1.2rem;
    font-weight: 600;
}

.custom-blog-formatting h5 {
    font-size: clamp(1rem, 1vw + 1rem, 1.125rem); /* min: 16px, max: 18px */
    margin-bottom: 1.2rem;
    font-weight: 600;
}

.custom-blog-formatting h6 {
    font-size: clamp(0.875rem, 0.8vw + 1rem, 1rem); /* min: 14px, max: 16px */
    margin-bottom: 1.2rem;
    font-weight: 600;
}

/* Paragraphs within article */
.custom-blog-formatting p  {
    font-size: 1.1rem;
    line-height: 1.6;
}

.custom-blog-formatting p:not(:last-of-type)  {
    margin-bottom: 1rem;
}

.custom-blog-formatting p {
    font-size: 1.2rem !important;
}

/* Links within article */
article a {
    text-decoration: none;
}

article a:hover {
    text-decoration: underline;
}

/* Blockquotes within article */
article blockquote {
    border-left: 4px solid;
    padding-left: 1rem;
    margin-bottom: 1rem;
}

/* Lists within article */

/* Code within article */
article pre,
article code {
    border: 1px solid;
    padding: 0.5rem;
}

.mission-wrapper p {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
}

/* General post styling */

.js-toc-content p + p {
    margin-top: 1rem;
}

.js-toc-content li {
    list-style-type: square;
    margin: 5px 0;
    padding-left: 10px;
}

.js-toc-content li li {
    list-style-type: circle;
    margin-left: 20px;
}

.js-toc-content * ~ h1,
.js-toc-content * ~ h2,
.js-toc-content * ~ h3,
.js-toc-content * ~ h4,
.js-toc-content * ~ h5,
.js-toc-content * ~ h6 {
    margin-top: 30px;
}

.js-toc-content h4 {
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.js-toc-content h5 {
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.js-toc-content h6 {
    font-weight: bold;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

/* Styles for header */

.inside-header {
    padding: 0px 20px;
}

@media (max-width: 1024px) {
    .inside-header {
        padding: 0px 20px;
    }
    .site-header .header-image {
        width: 200px;
    }
}

@media (max-width: 768px) {
    .site-header .header-image {
        width: 140px;
    }
}

#sticky-navigation {
    background-color: #fff;
}

.main-navigation.navigation-stick.has-sticky-branding
    .inside-navigation.grid-container {
    padding: 0 20px !important;
}

@media (min-width: 420px) {
    #mobile-menu-control-wrapper {
        margin-left: unset;
    }
}
@media (min-width: 1024px) {
    #masthead .nav-cta-button {
        order: 3;
        margin-left: 20px;
    }
}
@media (max-width: 1024px) {
    #masthead .nav-cta-button {
        margin-left: auto;
    }
}
@media (max-width: 420px) {
    #masthead a.nav-cta-button {
        display: none;
    }
}

#generate-slideout-menu .nav-cta-button {
    width: 100%;
    margin-inline: 1rem;
    color: #fff;
    display: block;
    text-align: center;
}

/* Remove underlines on primary buttons */

a.bg-primary-700:hover {
    text-decoration: none;
}

.bg-footer-blue {
    background-color: #191b28 !important;
}

ul.sub-menu {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important;
    border-radius: 3px;
    overflow: hidden;
}

.blog-top-spacer:not(:first-child) {
    padding-top: 2rem;
}

.blog-top-spacer:first-child {
    padding-top: 0;
}

@media (max-width: 768px) {
    .toc-container {
        display: none !important;
    }
}

/* This CSS ensures that iFrames are responsive */
.responsive-video {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.custom-blog-formatting img {
    border-radius: 12px;
}

.custom-blog-formatting figure {
    margin-top: 30px;
    margin-bottom: 30px;
}

.custom-blog-formatting figure.wp-block-pullquote {
    background-color: #f8f9fa;
    padding: 0;
}

.custom-blog-formatting .wp-block-quote {
    background-color: #f8f9fa;
    padding: 0;
}

.custom-blog-formatting blockquote {
    padding: 1.5rem !important;
    margin-bottom: 30px;
}

.custom-blog-formatting ul {
    list-style-type: square !important;
    margin-left: 1rem !important;
    margin-top: 1rem !important;
}

ul.wp-block-list {
    list-style-type: square !important;
    padding-left: 1rem;
    padding-top: 1rem;
}

.faq-answer br {
    display: block;
    margin-top: 10px;
}

/* Modal background */

#get-started-modal {
    z-index: 500;
}

#get-started-modal div {
    z-index: 510;
}