@import "fonts.css";
@import "base.css";
@import "header-footer.css";
@import "bricks.css";

/*------------------------*/
/* theme colors
/*------------------------*/

:root {
    --textDark: rgba(38, 50, 56, 1);
    --textMedium: rgba(38, 50, 56, 0.7);
    --borderMedium: rgba(38, 50, 56, 0.2); 
    --borderLight: rgba(38, 50, 56, 0.075);
    /* PTR-site customization. Originals in comments
    --accent: #f4b500;
    --textAccent: #e6ac00; */
    --accent:var(--ptr-yellow);
    --textAccent:var(--ptr-yellow)
    --light: rgba(38, 50, 56, 0.035);
    --ptr_dark-blue: #114a8d;
    --ptr-light-blue: #1a5baa;
    --ptr-yellow: #fdd106;
}
/*------------------------*/
/* turn grayscale off
/*------------------------*/

img {filter: grayscale(0);}

/*------------------------*/
/* colorize_image
/*------------------------*/

.colorize_image {filter: contrast(1) sepia(1) hue-rotate(160deg) grayscale(0.8)!important;}

/*------------------------*/
/* black_2_textDark
/*------------------------*/

.map::after, .black_2_textDark {filter: contrast(0.7) sepia(1) hue-rotate(160deg)!important;}

/*------------------------*/
/* black_2_textMedium
/*------------------------*/

.black_2_textMedium {filter: contrast(0.3) sepia(0.3) hue-rotate(160deg) brightness(1.4)!important;}

/*------------------------*/
/* black_2_accent
/*------------------------*/

.black_2_accent {filter: contrast(0.11) sepia(1) hue-rotate(340deg) contrast(13)!important;}

/*------------------------*/
/* typography
/*------------------------*/

h1, h2 {letter-spacing: -0.02em;}
header nav > ul > li a {letter-spacing: 0.04em;}

/*------------------------*/
/* nav — sticky backdrop blur
/*------------------------*/

header.sticky {
    background: rgba(17, 74, 141, 0.93);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(253, 209, 6, 0.18);
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.18);
}

/*------------------------*/
/* nav — CTA button pill shape
/*------------------------*/

header .button {
    border-radius: 2rem;
    padding: 0.6em 1.5em;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
}

/*------------------------*/
/* nav — dropdown refinement
/*------------------------*/

header nav > ul > li > ul li {
    border-left: 3px solid transparent;
    transition: border-color 0.15s ease-in-out;
}
header nav > ul > li > ul li:hover {
    border-left-color: var(--ptr-yellow);
}
header nav > ul > li > ul li a:hover {
    color: var(--ptr-yellow);
}

/*------------------------*/
/* nav — social icon buttons
/*------------------------*/

header ul.buttons.social .button {
    border-radius: 50%;
    transition: transform 0.15s ease-in-out, background 0.15s ease-in-out;
}
header ul.buttons.social .button:hover {
    transform: translateY(-2px);
    background: var(--ptr-yellow);
}

/*------------------------*/
/* cards — hover lift
/*------------------------*/

div.box {
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}
div.box:hover {
    box-shadow: 0 8px 32px rgba(17, 74, 141, 0.13);
    transform: translateY(-3px);
}

/*------------------------*/
/* pitch page layout
/*------------------------*/

.pitch-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}
.pitch-sidebar {
    position: sticky;
    top: 6rem;
}
@media (max-width: 800px) {
    .pitch-layout {
        grid-template-columns: 1fr;
    }
    .pitch-sidebar {
        position: static;
    }
}

/*------------------------*/
/* mobile nav — Join Us link
/*------------------------*/

header nav > ul > li.mobile-cta {display: none;}
body.mobilemenu header nav > ul > li.mobile-cta {display: block;}
body.mobilemenu header nav > ul > li.mobile-cta a {
    color: var(--ptr-yellow);
    font-weight: bold;
}

/*------------------------*/
/* section dividers
/*------------------------*/

section:not(.hasbackgroundcolor) + section:not(.hasbackgroundcolor)::before {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--borderLight) 20%, var(--borderLight) 80%, transparent);
    margin-bottom: 2rem;
}