/*
Theme Name: cobury.com child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** BRAND TOKENS ***************/

:root {
    /* Colors */
    --brand-deep-canvas: #3F598A;
    --brand-mint-green: #9AEFB8;
    --brand-soft-ivory: #F6F6F6;
    --brand-midnight-navy: #001D3B;
    --brand-midnight-navy-80: rgba(0, 29, 59, 0.8);
    --brand-midnight-navy-45: rgba(0, 29, 59, 0.45);

    /* Font families */
    --font-heading: "Reckless Standard M-TRIAL", Georgia, "Times New Roman", serif;
    --font-body: "Saans-TRIAL", "Helvetica Neue", Arial, sans-serif;

    /* Type scale — desktop */
    --fs-h1: 64px;
    --fs-h2: 48px;
    --fs-h3: 34px;
    --fs-h4: 26px;
    --fs-body-18: 18px;
    --fs-body-17: 17px;
    --fs-body-16: 16px;
    --fs-button: 17px;
    --fs-subtitle: 16px;
}

@media only screen and (max-width: 48em) {
    :root {
        /* Type scale — mobile */
        --fs-h1: 45px;
        --fs-h2: 32px;
        --fs-h3: 26px;
        --fs-h4: 24px;
    }
}

/*************** TYPOGRAPHY ***************/

body {
    background-color: var(--brand-soft-ivory);
    font-family: var(--font-body);
    font-size: var(--fs-body-16);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

/* Headings — Reckless Standard M Regular, 100% line height, -1% tracking.
   .h1–.h4 classes (used on UX Builder text wrappers) style their children too. */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.h1 > *, .h2 > *, .h3 > *, .h4 > *,
.heading-font {
    /*color: var(--brand-midnight-navy);*/
    font-family: var(--font-heading);
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    letter-spacing: -0.01em;
    margin-top: 0;
    margin-bottom: .5em;
    text-rendering: optimizeLegibility;
}

h1, .h1, .h1 > * {
    font-size: var(--fs-h1);
}

h2, .h2, .h2 > * {
    font-size: var(--fs-h2);
}

h3, .h3, .h3 > * {
    font-size: var(--fs-h3);
}

h4, .h4, .h4 > * {
    font-size: var(--fs-h4);
}

/* Not defined in the brand spec — kept on the body font as small headings */
h5, .h5, .h5 > *,
h6, .h6, .h6 > * {
    color: var(--brand-midnight-navy);
    font-family: var(--font-body);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
}

h5, .h5, .h5 > * {
    font-size: var(--fs-body-18);
}

h6, .h6, .h6 > * {
    font-size: var(--fs-subtitle);
}

/* Body text sizes */
.text-18 {
    font-size: var(--fs-body-18);
    line-height: 1.5;
    letter-spacing: -0.01em;
}

.text-17 {
    font-size: var(--fs-body-17);
    line-height: 1.5;
    letter-spacing: -0.01em;
}

.text-16 {
    font-size: var(--fs-body-16);
    line-height: 1.5;
    letter-spacing: -0.01em;
}

/* Subtitle — Saans Regular 16, uppercase, 3% tracking */
.subtitle {
    font-family: var(--font-body);
    font-size: var(--fs-subtitle);
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Button — Saans Medium 17, uppercase, 0% tracking */
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    font-family: var(--font-body);
    font-size: var(--fs-button);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: uppercase;
}

/* Navigation */
.nav > li > a,
.mobile-sidebar-levels-2 .nav > li > ul > li > a {
    font-family: var(--font-body);
    font-weight: 500;
}

a {
    color: #50CF7D;
}


/*************** ADD CUSTOM CSS HERE.   ***************/

.secondary.is-link, .secondary.is-outline, .secondary.is-underline {
    color: var(--brand-mint-green);
}

.home-page-testimonials {
    .flickity-page-dots .dot {
        border-color: rgba(255, 255, 255, 0.3);
    }

    .flickity-page-dots .dot.is-selected {
        background-color: white !important;
    }
}

.tag-label {
    background-color: var(--brand-mint-green);
    color: #000;
}

.has-hover:hover .tag-label {
    color: white;
}

.accordion a.accordion-title.plain {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -0.22px;
}

a.plain {
    /*color: var(--brand-mint-green);*/
}

.post-title > a.plain,
.post-title > * {
    color: #000;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 26px */
    letter-spacing: -0.26px;
}

.has-hover:hover .post-title > a.plain {
    color: var(--brand-mint-green);
}

.box-blog-post .is-divider {
    background-color: var(--brand-mint-green);
}

.success {
    border-color: var(--brand-mint-green);
    background-color: var(--brand-mint-green);
    color: black;
    box-shadow: unset !important;
    @media (hover: hover) and (pointer: fine) {
        &:hover {
            border-color: var(--brand-deep-canvas);
            background-color: var(--brand-deep-canvas);
            color: white;
        }
    }
}

.is-divider.entry-divider,
.is-divider.medium {
    background-color: var(--brand-mint-green);
}

.featured-title {
    background: #3F598A !important;
}


@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/

}