/* Place Portraits brand overrides — loaded after the Rhythm template's own CSS. */

:root {
    --pp-prairie-blue: #2E4B5F;
    --pp-dusty-sky: #8FB4C0;
    --pp-linen-cream: #F4EDE1;
    --pp-linen-shade: #EAE0CB;
    --pp-terracotta: #C1633D;
    --pp-ink: #2A2521;
}

body {
    background-color: var(--pp-linen-cream);
    color: var(--pp-ink);
    font-family: 'Work Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.section-title,
.logo,
.nav-logo-wrap,
.hs-line-1, .hs-line-2, .hs-line-3,
.banner-heading,
.call-action-1-heading {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    color: var(--pp-prairie-blue);
}

.section-title-descr,
.services-descr,
.work-process-description,
p {
    font-family: 'Work Sans', sans-serif;
}

/* Portfolio grid captions -- the theme's default is a heavy 600 weight in
   its own font, unrelated to the rest of the site's type. */
.work-title {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    color: var(--pp-ink);
    /* Captions mix Kristy's own typed titles ("garden detail") with the
       category fallback when she hasn't set one ("Farm & Ranch") -- this
       makes both display in the same case regardless of how she typed it,
       rather than asking her to remember a capitalization convention. */
    text-transform: capitalize;
}

a {
    color: var(--pp-prairie-blue);
}

a:hover,
a:focus {
    color: var(--pp-terracotta);
}

/* Book Your Session form section + footer — tighten the gap between them
   since they share the same background and read as one continuous block */
.pp-book-section {
    padding-bottom: 40px;
}

/* The theme's default 140px top+bottom padding on every .page-section reads
   fine when the background changes between sections, but stacks into a
   ~280px dead gap when two sections in a row share the same cream
   background (e.g. How It Works -> Packages Preview) with nothing marking
   where one ends and the next begins. Tighten the default and add a
   hairline divider so adjacent same-background sections read as separate
   without needing every section to alternate color. */
.page-section {
    padding: 90px 0;
}

.page-section + .page-section {
    border-top: 1px solid rgba(46, 75, 95, .15);
}

/* A real background shift for a section sandwiched between two others that
   share the plain cream background -- a hairline alone was too subtle to
   read as a section break on some displays. */
.bg-linen-shade {
    background-color: var(--pp-linen-shade);
}

.pp-footer {
    padding-top: 40px;
    background-color: var(--pp-prairie-blue);
    color: var(--pp-linen-cream);
}

.pp-footer .footer-copy {
    color: var(--pp-linen-cream);
}

.pp-footer .footer-made,
.pp-footer .footer-made a {
    color: rgba(244, 237, 225, .75);
}

.pp-footer .footer-nav a {
    color: rgba(244, 237, 225, .85);
}

.pp-footer .footer-nav a:hover {
    color: var(--pp-terracotta);
}

.pp-footer .link-to-top {
    background: var(--pp-linen-cream);
}

/* Nav CTA — pinned to true vertical center via absolute positioning, since the
   template's inline/float nav layout doesn't reliably center a taller button
   element the way it centers plain text links. */
.pp-nav-links {
    margin-right: 200px;
}

.pp-nav-cta {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    padding: 14px 30px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 6px 16px rgba(193, 99, 61, .35);
}

.pp-nav-cta:hover,
.pp-nav-cta:focus {
    color: #fff;
    box-shadow: 0 8px 20px rgba(46, 75, 95, .35);
}

.main-nav .inner-nav ul li a.btn-mod.btn-small:hover,
.main-nav .inner-nav ul li a.btn-mod.btn-small:focus {
    color: #fff;
}

/* Nav logo */
.pp-logo img {
    height: 48px;
    width: auto;
    border-radius: 4px;
}

/* Nav */
.main-nav .inner-nav > ul > li > a {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    color: var(--pp-ink);
}

.main-nav.filled {
    background-color: var(--pp-linen-cream);
}

/* Buttons / CTAs */
.btn-mod,
a.btn-mod {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    background-color: var(--pp-terracotta);
    border-color: var(--pp-terracotta);
    color: #fff;
}

.btn-mod:hover,
.btn-mod:focus,
a.btn-mod:hover,
a.btn-mod:focus {
    background-color: var(--pp-prairie-blue);
    border-color: var(--pp-prairie-blue);
    color: #fff;
}

.btn-mod.btn-round {
    border-radius: 8px;
}

/* Secondary panels / dividers */
.bg-gray-lighter,
.bg-light {
    background-color: var(--pp-dusty-sky) !important;
}

.bg-dark {
    background-color: var(--pp-prairie-blue) !important;
}

/* Hero */
.pp-hero-bg {
    position: relative;
}

.pp-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(26, 22, 19, .45), rgba(26, 22, 19, .55));
}

.pp-hero-inner {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 120px;
    padding-bottom: 80px;
}

.pp-hero-title {
    font-size: 56px;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
}

.pp-hero-subhead {
    font-family: 'Work Sans', sans-serif;
    font-size: 26px;
    font-weight: 400;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
    white-space: nowrap;
}

.pp-hero-cta {
    font-size: 18px;
    padding: 18px 44px;
}

@media (max-width: 991px) {
    .pp-hero-title {
        font-size: 40px;
    }

    .pp-hero-subhead {
        font-size: 21px;
    }
}

@media (max-width: 767px) {
    .pp-hero-title {
        font-size: 30px;
    }

    .pp-hero-subhead {
        white-space: normal;
        font-size: 17px;
    }

    .pp-hero-inner {
        padding-top: 90px;
    }
}

/* Page video embeds (ScreenPal) */
.pp-video-embed {
    max-width: 800px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(46, 75, 95, .12);
}

.pp-video-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Story / Positioning cards */
.pp-story-thumb {
    margin-bottom: 20px;
    border-radius: 6px;
    overflow: hidden;
    max-width: 240px;
    aspect-ratio: 3 / 2;
}

.pp-story-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pp-story-title {
    font-size: 22px;
    margin-bottom: 12px;
}

.pp-story-text {
    font-size: 17px;
}

/* How It Works step badges */
.pp-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background-color: var(--pp-terracotta);
    color: #fff;
    font-family: 'Fraunces', serif;
    font-size: 20px;
    font-weight: 500;
}

/* Gifting page -- Occasions icon badges */
.pp-occasion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    border: 2px solid var(--pp-terracotta);
    color: var(--pp-terracotta);
}

.pp-occasion-icon svg {
    width: 30px;
    height: 30px;
}

/* Gifting page -- Two audiences cards (separates the two columns on the
   flat dusty-sky background, which otherwise reads as one run-on block) */
.pp-audience-card {
    height: 100%;
    padding: 34px 30px;
    background-color: #fff;
    border: 1px solid rgba(46, 75, 95, .15);
    border-radius: 6px;
}

/* Trust bar */
.pp-trust-bar {
    background-color: var(--pp-linen-cream);
    border-top: 1px solid rgba(46, 75, 95, .15);
    border-bottom: 1px solid rgba(46, 75, 95, .15);
    padding: 18px 0;
    text-align: center;
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    color: var(--pp-prairie-blue);
    letter-spacing: .02em;
}

/* Packages preview cards */
.pp-package-card {
    background: #fff;
    border: 1px solid rgba(46, 75, 95, .12);
    border-radius: 6px;
    padding: 40px 30px;
    text-align: center;
    height: 100%;
    box-shadow: 0 4px 14px rgba(46, 75, 95, .08);
}

.pp-package-card.pp-package-featured {
    border-color: var(--pp-terracotta);
    box-shadow: 0 10px 30px rgba(46, 75, 95, .12);
    transform: translateY(-10px);
}

/* Same emphasis as .pp-package-featured (border + badge + shadow) but
   without the vertical lift -- for a flush 4-up row (gifting add-ons)
   where lifting one card out of line reads as misaligned rather than
   intentional, unlike the 2-3 card pricing rows it was designed for. */
.pp-package-card.pp-package-highlight {
    border-color: var(--pp-terracotta);
    border-width: 2px;
    box-shadow: 0 10px 30px rgba(46, 75, 95, .12);
}

.pp-addons-note {
    font-size: 16px;
    color: var(--pp-ink);
}

/* A deliberately louder treatment for the add-ons upsell -- extra
   collages/magnets/multi-address shipping are real, easy revenue (see the
   playbook's "upsell conversation"), so this shouldn't read as fine print
   under the pricing cards. */
.pp-addons-callout {
    background: rgba(193, 99, 61, .08);
    border: 1px solid rgba(193, 99, 61, .3);
    border-radius: 6px;
    padding: 36px 30px;
}

.pp-addons-callout h3 {
    margin: 0 0 10px;
}

.pp-addons-callout p {
    margin: 0 0 22px;
    font-size: 16px;
}

.pp-package-badge {
    display: inline-block;
    background: var(--pp-terracotta);
    color: #fff;
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.pp-package-features {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    text-align: left;
}

.pp-package-features li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    font-size: 15px;
    color: var(--pp-ink);
}

.pp-package-features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--pp-terracotta);
    font-weight: 700;
}

.pp-package-price {
    font-family: 'Fraunces', serif;
    font-size: 28px;
    color: var(--pp-terracotta);
    margin: 10px 0 15px;
}

/* Seasonal urgency banner */
.pp-seasonal-banner {
    background-color: var(--pp-terracotta);
    color: #fff;
    text-align: center;
    padding: 16px 20px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
}

.pp-seasonal-banner a {
    color: #fff;
    text-decoration: underline;
}

/* Final CTA */
.pp-final-cta {
    background-color: var(--pp-prairie-blue);
    color: var(--pp-linen-cream);
}

.pp-final-cta h2,
.pp-final-cta h3 {
    color: var(--pp-linen-cream);
}

.pp-final-cta .section-title-descr {
    color: rgba(244, 237, 225, .85);
}

/* FAQ accordion */
dl.accordion > dt > a,
dl.toggle > dt > a {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    color: var(--pp-prairie-blue);
}

/* Booking form */
.pp-booking-form .form-control {
    font-family: 'Work Sans', sans-serif;
    border-radius: 4px;
}

.pp-booking-success {
    background-color: rgba(46, 75, 95, .08);
    border: 1px solid var(--pp-prairie-blue);
    color: var(--pp-prairie-blue);
    padding: 16px 20px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.pp-field-error {
    color: var(--pp-terracotta);
    font-size: 13px;
    margin-top: 4px;
    display: block;
}

/* Stub / coming-soon pages */
.pp-stub-section {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Plain placeholder tile for the Portfolio grid before any real photos are
   uploaded -- same 3:2 shape real photos will use, so the grid doesn't
   reflow once they're added. */
.pp-voice-card {
    aspect-ratio: 3 / 2;
    background: var(--pp-linen-cream);
    border: 1px solid rgba(46, 75, 95, .15);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pp-voice-card p {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--pp-prairie-blue);
    opacity: .6;
    margin: 0;
}

/* Portfolio page: category/shot-type filter buttons above the carousel */
.pp-filter-group {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 12px 12px;
}

.pp-filter-btn {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: var(--pp-prairie-blue);
    background: #fff;
    border: 1px solid rgba(46, 75, 95, .2);
    border-radius: 20px;
    padding: 7px 16px;
    cursor: pointer;
    transition: all .15s ease;
}

.pp-filter-btn:hover {
    border-color: var(--pp-prairie-blue);
}

.pp-filter-btn.is-active {
    background: var(--pp-prairie-blue);
    border-color: var(--pp-prairie-blue);
    color: #fff;
}

.portfolio-carousel .item {
    padding: 0 10px;
}

.portfolio-carousel img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.portfolio-carousel .work-title {
    margin-top: 10px;
    text-align: center;
}

/* Owl's own CSS never styles the .disabled state, so a carousel that
   can't move further in that direction looked exactly as clickable as
   one that could -- hide it outright instead. Also give both buttons a
   solid chip behind the arrow glyph so they read clearly over any photo,
   light or dark, rather than relying on the theme's plain dark glyph. */
.portfolio-carousel .owl-buttons .disabled {
    display: none;
}

.portfolio-carousel .owl-prev,
.portfolio-carousel .owl-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .9);
    color: var(--pp-prairie-blue);
    font-size: 26px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(46, 75, 95, .25);
}

.portfolio-carousel .owl-prev:hover,
.portfolio-carousel .owl-next:hover {
    background-color: #fff;
    opacity: 1;
}