/*
 * ProperPage
 * Brand overrides for Bootstrap 5
 */

/* --------------------------------------------------------------------------
   Brand
   -------------------------------------------------------------------------- */

:root {
    /* Core palette */
    --pp-navy:          #0b2438;
    --pp-navy-dark:     #071b2b;
    --pp-navy-light:    #17384e;

    --pp-gold:          #f5a800;
    --pp-gold-hover:    #dd9600;
    --pp-gold-soft:     #fff4d8;

    --pp-cream:         #faf8f4;
    --pp-warm-white:    #fffdf9;
    --pp-stone:         #f0ece5;
    --pp-border:        #ded9d0;

    --pp-text:          #15202a;
    --pp-muted:         #66717a;
    --pp-white:         #ffffff;

    /* Bootstrap overrides */
    --bs-primary:       var(--pp-gold);
    --bs-primary-rgb:   245, 168, 0;

    --bs-secondary:     var(--pp-navy);
    --bs-secondary-rgb: 11, 36, 56;

    --bs-body-color:    var(--pp-text);
    --bs-body-bg:       var(--pp-warm-white);

    --bs-link-color:        var(--pp-navy);
    --bs-link-hover-color:  var(--pp-gold-hover);

    /* Typography */
    --pp-font-body:     'DM Sans', sans-serif;
    --pp-font-display:  'Lora', Georgia, serif;
    --pp-font-hand:     'Caveat', cursive;

    /* Shape */
    --pp-radius-sm:     .375rem;
    --pp-radius:        .6rem;
    --pp-radius-lg:     1rem;

    /* Shadows */
    --pp-shadow-sm: 0 .25rem 1rem rgba(11, 36, 56, .07);
    --pp-shadow:    0 .75rem 2.5rem rgba(11, 36, 56, .12);
}


/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--pp-font-body);
    color: var(--pp-text);
    background: var(--pp-warm-white);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--pp-font-display);
    color: var(--pp-navy);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.025em;
}

h1 {
    font-size: clamp(2.75rem, 5vw, 5rem);
}

h2 {
    font-size: clamp(2rem, 3vw, 3rem);
}

h3 {
    font-size: clamp(1.35rem, 2vw, 1.75rem);
}

p:last-child {
    margin-bottom: 0;
}

a {
    text-underline-offset: .2em;
    text-decoration-thickness: .08em;
}

::selection {
    background: var(--pp-gold);
    color: var(--pp-navy-dark);
}


/* --------------------------------------------------------------------------
   Typography helpers
   -------------------------------------------------------------------------- */

.text-display {
    font-family: var(--pp-font-display);
}

.text-hand {
    font-family: var(--pp-font-hand);
    font-size: 1.25em;
}

.text-gold {
    color: var(--pp-gold) !important;
}

.text-navy {
    color: var(--pp-navy) !important;
}

.text-muted {
    color: var(--pp-muted) !important;
}

.lead {
    font-size: 1.15rem;
    line-height: 1.6;
}


/*
 * Use around a word/span for the little hand-drawn gold underline
 * seen in the brand.
 */

.hand-underline {
    position: relative;
    display: inline-block;
}

.hand-underline::after {
    content: '';
    position: absolute;
    left: 2%;
    right: -2%;
    bottom: -.08em;
    height: 3px;
    background: var(--pp-gold);
    border-radius: 100%;
    transform: rotate(-1deg);
}


/* --------------------------------------------------------------------------
   Backgrounds
   -------------------------------------------------------------------------- */

.bg-cream {
    background-color: var(--pp-cream) !important;
}

.bg-stone {
    background-color: var(--pp-stone) !important;
}

.bg-navy {
    background-color: var(--pp-navy) !important;
    color: var(--pp-white);
}

.bg-navy h1,
.bg-navy h2,
.bg-navy h3,
.bg-navy h4,
.bg-navy h5,
.bg-navy h6 {
    color: var(--pp-white);
}


/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section {
    padding-top: clamp(4rem, 7vw, 7rem);
    padding-bottom: clamp(4rem, 7vw, 7rem);
}

.section-sm {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.section-heading {
    margin-bottom: 2.5rem;
}


/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */

.navbar {
    --bs-navbar-padding-y: 1.1rem;

    background: rgba(255, 253, 249, .96);
}

.navbar-brand {
    color: var(--pp-navy);
}

.navbar .nav-link {
    position: relative;
    color: var(--pp-text);
    font-weight: 500;
    padding-left: .9rem !important;
    padding-right: .9rem !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
    color: var(--pp-navy);
}

.navbar .nav-link.active::after {
    content: '';
    position: absolute;
    left: .9rem;
    right: .9rem;
    bottom: .25rem;
    height: 2px;
    background: var(--pp-gold);
    border-radius: 2px;
}


/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: .8rem;

    font-weight: 700;
    border-radius: var(--pp-radius-sm);
    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .15s ease,
        box-shadow .15s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    --bs-btn-color: var(--pp-navy-dark);
    --bs-btn-bg: var(--pp-gold);
    --bs-btn-border-color: var(--pp-gold);

    --bs-btn-hover-color: var(--pp-navy-dark);
    --bs-btn-hover-bg: var(--pp-gold-hover);
    --bs-btn-hover-border-color: var(--pp-gold-hover);

    --bs-btn-active-color: var(--pp-navy-dark);
    --bs-btn-active-bg: var(--pp-gold-hover);
    --bs-btn-active-border-color: var(--pp-gold-hover);
}

.btn-outline-secondary {
    --bs-btn-color: var(--pp-navy);
    --bs-btn-border-color: var(--pp-navy);

    --bs-btn-hover-color: var(--pp-white);
    --bs-btn-hover-bg: var(--pp-navy);
    --bs-btn-hover-border-color: var(--pp-navy);
}

.btn-dark {
    --bs-btn-bg: var(--pp-navy);
    --bs-btn-border-color: var(--pp-navy);

    --bs-btn-hover-bg: var(--pp-navy-light);
    --bs-btn-hover-border-color: var(--pp-navy-light);
}


/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--pp-cream);
}

.hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero h1 {
    max-width: 11ch;
}

.hero-copy {
    max-width: 35rem;
    font-size: 1.1rem;
}


/*
 * Optional protection for text over the generated hero.
 * The image already has negative space, so keep this subtle.
 */

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(250, 248, 244, .96) 0%,
            rgba(250, 248, 244, .84) 27%,
            rgba(250, 248, 244, .15) 48%,
            rgba(250, 248, 244, 0) 62%
        );
}


/* --------------------------------------------------------------------------
   Feature / service blocks
   -------------------------------------------------------------------------- */

.feature-icon {
    width: 4rem;
    height: 4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: var(--pp-cream);
    color: var(--pp-navy);

    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.feature-title {
    font-family: var(--pp-font-body);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--pp-navy);
}


/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
    --bs-card-border-color: var(--pp-border);
    --bs-card-border-radius: var(--pp-radius);

    background: var(--pp-warm-white);
}

.card-clean {
    border: 0;
    box-shadow: var(--pp-shadow-sm);
}

.card-hover {
    transition: transform .2s ease, box-shadow .2s ease;
}

.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--pp-shadow);
}


/* --------------------------------------------------------------------------
   Dark proposition strip
   -------------------------------------------------------------------------- */

.value-strip {
    background: var(--pp-navy);
    color: rgba(255, 255, 255, .85);
}

.value-strip h2,
.value-strip h3,
.value-strip h4 {
    color: var(--pp-white);
}

.value-strip .feature-icon {
    background: transparent;
    border: 2px solid var(--pp-gold);
    color: var(--pp-gold);
}


/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-label {
    font-weight: 600;
    color: var(--pp-navy);
}

.form-control,
.form-select {
    border-color: var(--pp-border);
    border-radius: var(--pp-radius-sm);
    padding: .8rem .9rem;
    background-color: var(--pp-white);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--pp-gold);
    box-shadow: 0 0 0 .2rem rgba(245, 168, 0, .16);
}


/* --------------------------------------------------------------------------
   FAQ / accordion
   -------------------------------------------------------------------------- */

.accordion {
    --bs-accordion-border-color: var(--pp-border);
    --bs-accordion-btn-color: var(--pp-navy);
    --bs-accordion-active-color: var(--pp-navy);
    --bs-accordion-active-bg: var(--pp-cream);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(245, 168, 0, .12);
}

.accordion-button {
    font-weight: 700;
    font-size: 1.05rem;
}


/* --------------------------------------------------------------------------
   Quotes / testimonials
   -------------------------------------------------------------------------- */

.testimonial {
    position: relative;
    padding-left: 2rem;
}

.testimonial::before {
    content: '“';
    position: absolute;
    left: 0;
    top: -.4rem;

    font-family: var(--pp-font-display);
    font-size: 4rem;
    line-height: 1;
    color: var(--pp-gold);
}


/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.price {
    font-family: var(--pp-font-display);
    color: var(--pp-navy);
    font-weight: 700;
    line-height: 1;
}

.price-main {
    font-size: clamp(3rem, 5vw, 4.5rem);
}

.price-period {
    font-family: var(--pp-font-body);
    color: var(--pp-muted);
    font-size: 1rem;
    font-weight: 400;
}


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
    background: var(--pp-navy-dark);
    color: rgba(255, 255, 255, .7);
    padding: 3rem 0;
}

.site-footer a {
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--pp-gold);
}

.site-footer .footer-brand {
    color: var(--pp-white);
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

    .hero {
        min-height: auto;
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    /*
     * Desktop artwork has intentional whitespace on the left.
     * A separate mobile crop/image will probably work better,
     * but this gives us a usable fallback.
     */

    .hero-image {
        opacity: .2;
        object-position: 65% center;
    }

    .hero::after {
        background: rgba(250, 248, 244, .72);
    }

    .navbar .nav-link.active::after {
        display: none;
    }
}


@media (max-width: 575.98px) {

    body {
        font-size: .975rem;
    }

    .section {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .hero h1 {
        max-width: none;
    }

    .btn {
        --bs-btn-padding-x: 1.25rem;
    }
}


/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

:focus-visible {
    outline: 3px solid var(--pp-gold);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}