/*
=========================================================
 PETER DENG
 BANKNOTE / GUILLOCHE VISUAL SYSTEM
 HERO ALIGNMENT + FOOTER REFINEMENT
=========================================================
*/

/* =======================================================
   HERO BASE
======================================================= */

.tax-hero,
.taxx-hero,
.tprep-hero,
.btx-hero,
.pd-faq-hero,
.pdc-hero,
.pd-about-hero,
.pd-contact-hero,
.contact-premium-hero {
    position: relative !important;
    isolation: isolate;
    overflow: hidden;
    height: auto !important;
}

/* Homepage */
.tax-hero {
    min-height: 440px !important;
}

/* Interior pages */
.taxx-hero,
.tprep-hero,
.btx-hero,
.pd-faq-hero,
.pdc-hero,
.pd-about-hero {
    min-height: 410px !important;
}

/* Contact height is controlled by the dedicated Contact stylesheet. */
.pd-contact-hero {
    min-height: 390px !important;
}

/* =======================================================
   CONSISTENT CONTENT WIDTH / ALIGNMENT
======================================================= */

/*
 * Main site content visually uses a centered content rail.
 * Keep hero content on that same rail.
 */
.tax-hero-layout,
.taxx-hero-inner,
.tprep-hero-inner,
.btx-hero-inner,
.pd-faq-hero-grid,
.pdc-hero-grid,
.pd-about-hero-grid,
.contact-premium-hero-grid {
    width: min(100% - 48px, 1180px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/*
 * Tax Preparation was visibly too close to the left edge.
 * Keep its own internal layout/grid intact.
 */
.tprep-hero-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/*
 * Do not collapse any existing grid or flex children.
 */
.tax-hero > *,
.taxx-hero > *,
.tprep-hero > *,
.btx-hero > *,
.pd-faq-hero > *,
.pdc-hero > *,
.pd-about-hero > *,
.pd-contact-hero > *,
.contact-premium-hero > * {
    min-width: 0;
}

/* =======================================================
   BANKNOTE ART
======================================================= */

.pd-banknote-art {
    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;
    user-select: none;

    background-image:
        url("./peterdeng-guilloche.svg");

    background-repeat: no-repeat;

    mix-blend-mode: screen;
    opacity: .20;
}

/* Keep actual content above decorative artwork */
.tax-hero > :not(.pd-banknote-art),
.taxx-hero > :not(.pd-banknote-art),
.tprep-hero > :not(.pd-banknote-art),
.btx-hero > :not(.pd-banknote-art),
.pd-faq-hero > :not(.pd-banknote-art),
.pdc-hero > :not(.pd-banknote-art),
.pd-about-hero > :not(.pd-banknote-art),
.pd-contact-hero > :not(.pd-banknote-art),
.contact-premium-hero > :not(.pd-banknote-art):not(.contact-blob) {
    position: relative;
    z-index: 2;
}

/* =======================================================
   PAGE-SPECIFIC ART POSITIONS
======================================================= */

/* Homepage */
.home .tax-hero .pd-banknote-art {
    background-size: 115% auto;
    background-position: 74% 48%;
    opacity: .23;
}

/* Tax Services */
body.page-id-37 .taxx-hero .pd-banknote-art {
    background-size: 108% auto;
    background-position: 91% 42%;
    opacity: .20;
}

/* Business Tax */
body.page-id-59 .btx-hero .pd-banknote-art {
    background-size: 112% auto;
    background-position: 15% 61%;
    opacity: .19;
}

/* Tax Preparation */
.tprep-hero .pd-banknote-art {
    background-size: 108% auto;
    background-position: 74% 50%;
    opacity: .18;
}

/* FAQ */
.pd-faq-hero .pd-banknote-art {
    background-size: 112% auto;
    background-position: 95% 30%;
    opacity: .18;
}

/* Consulting */
.pdc-hero .pd-banknote-art {
    background-size: 116% auto;
    background-position: 24% 68%;
    opacity: .20;
}

/* About */
.pd-about-hero .pd-banknote-art {
    background-size: 106% auto;
    background-position: 87% 62%;
    opacity: .18;
}

/* Contact */
.contact-premium-hero .pd-banknote-art,
.pd-contact-hero .pd-banknote-art {
    background-size: 108% auto;
    background-position: 67% 54%;
    opacity: .16;
}

/* =======================================================
   ROSETTE DETAILS
======================================================= */

.pd-banknote-art::before {
    content: "";
    position: absolute;

    width: 260px;
    height: 260px;

    right: -75px;
    top: -100px;

    border-radius: 50%;

    border: 1px solid rgba(212, 179, 106, .19);

    box-shadow:
        0 0 0 22px rgba(219, 233, 223, .020),
        0 0 0 44px rgba(212, 179, 106, .015),
        0 0 0 68px rgba(219, 233, 223, .013);
}

.pd-banknote-art::after {
    content: "";
    position: absolute;

    width: 150px;
    height: 150px;

    left: 4%;
    bottom: -75px;

    border-radius: 50%;

    border: 1px solid rgba(219, 233, 223, .15);

    box-shadow:
        0 0 0 16px rgba(212, 179, 106, .014),
        0 0 0 32px rgba(219, 233, 223, .012);
}

/* =======================================================
   FOOTER
======================================================= */

footer,
.site-footer,
.pd-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.pd-banknote-footer-art {
    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;
    user-select: none;

    background-image:
        url("./peterdeng-guilloche.svg");

    background-repeat: no-repeat;

    /*
     * More visible than before but still restrained.
     * Bring the wave + rosette further into view.
     */
    background-size: 82% auto;
    background-position: 78% 72%;

    opacity: .11;

    mix-blend-mode: screen;

    transform: scaleX(-1);
    transform-origin: center;
}

/* Keep footer content above artwork */
footer > :not(.pd-banknote-footer-art),
.site-footer > :not(.pd-banknote-footer-art),
.pd-footer > :not(.pd-banknote-footer-art) {
    position: relative;
    z-index: 2;
}

/* Extra footer rosette */
.pd-banknote-footer-art::before {
    content: "";
    position: absolute;

    width: 310px;
    height: 310px;

    right: 7%;
    bottom: -185px;

    border-radius: 50%;

    border:
        1px solid rgba(212, 179, 106, .20);

    box-shadow:
        0 0 0 24px rgba(212, 179, 106, .018),
        0 0 0 48px rgba(219, 233, 223, .018),
        0 0 0 72px rgba(212, 179, 106, .014);
}

/* =======================================================
   SECONDARY DARK SECTIONS
======================================================= */

.pd-banknote-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.pd-banknote-section-art {
    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    background-image:
        url("./peterdeng-guilloche.svg");

    background-repeat: no-repeat;
    background-size: 62% auto;
    background-position: 105% 52%;

    opacity: .065;

    mix-blend-mode: screen;
}

.pd-banknote-section > :not(.pd-banknote-section-art) {
    position: relative;
    z-index: 2;
}

/* =======================================================
   TABLET
======================================================= */

@media (max-width: 900px) {

    .tax-hero {
        min-height: 390px !important;
    }

    .taxx-hero,
    .tprep-hero,
    .btx-hero,
    .pd-faq-hero,
    .pdc-hero,
    .pd-about-hero {
        min-height: 350px !important;
    }

    .pd-contact-hero {
        min-height: 340px !important;
}

    .tax-hero-layout,
    .taxx-hero-inner,
    .tprep-hero-inner,
    .btx-hero-inner,
    .pd-faq-hero-grid,
    .pdc-hero-grid,
    .pd-about-hero-grid,
    .contact-premium-hero-grid {
        width: min(100% - 36px, 1180px) !important;
    }

    .pd-banknote-art {
        background-size: auto 110% !important;
        opacity: .15;
    }

    .pd-banknote-footer-art {
        background-size: auto 108%;
        background-position: 62% 70%;
        opacity: .085;
    }
}

/* =======================================================
   MOBILE
======================================================= */

@media (max-width: 600px) {

    .tax-hero,
    .taxx-hero,
    .tprep-hero,
    .btx-hero,
    .pd-faq-hero,
    .pdc-hero,
    .pd-about-hero,
    .pd-contact-hero,
    .contact-premium-hero {
        min-height: 0 !important;
        height: auto !important;
    }

    .tax-hero-layout,
    .taxx-hero-inner,
    .tprep-hero-inner,
    .btx-hero-inner,
    .pd-faq-hero-grid,
    .pdc-hero-grid,
    .pd-about-hero-grid,
    .contact-premium-hero-grid {
        width: min(100% - 28px, 1180px) !important;
    }

    .pd-banknote-art {
        background-size: auto 105% !important;
        background-position: 68% center !important;
        opacity: .11;
    }

    .pd-banknote-footer-art {
        background-size: auto 100%;
        background-position: 58% bottom;
        opacity: .065;
    }

    .pd-banknote-footer-art::before {
        width: 210px;
        height: 210px;
        right: -45px;
        bottom: -125px;
    }
}

/* =======================================================
   ACCESSIBILITY
======================================================= */

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

    .pd-banknote-art,
    .pd-banknote-footer-art,
    .pd-banknote-section-art {
        animation: none !important;
        transition: none !important;
    }
}


/* =======================================================
   TAX SERVICE CARDS — BANKNOTE / GUILLOCHE DETAIL
======================================================= */

.tax-services .tax-service-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/*
 * The card already has content and iconography.
 * Keep the banknote work very subtle so readability stays high.
 */
.tax-services .tax-service-card::after {
    content: "";
    position: absolute;
    inset: 0;

    z-index: 0;
    pointer-events: none;

    background-image:
        url("./peterdeng-guilloche.svg");

    background-repeat: no-repeat;

    opacity: .055;

    mix-blend-mode: multiply;
}

/* Keep card contents above the banknote artwork */
.tax-services .tax-service-card > * {
    position: relative;
    z-index: 2;
}

/* -------------------------------------------------------
   CARD 01 — Individual Tax
------------------------------------------------------- */

.tax-services .tax-service-individual::after {
    background-size: 165% auto;
    background-position: 18% 70%;
    opacity: .065;
}

/* -------------------------------------------------------
   CARD 02 — Business Tax
------------------------------------------------------- */

.tax-services .tax-service-business::after {
    background-size: 145% auto;
    background-position: 83% 30%;
    opacity: .052;
}

/* -------------------------------------------------------
   CARD 03 — Tax Preparation
------------------------------------------------------- */

.tax-services .tax-service-preparation::after {
    background-size: 155% auto;
    background-position: 64% 78%;
    opacity: .058;
}

/* -------------------------------------------------------
   EXTRA SMALL BANKNOTE ROSETTE
------------------------------------------------------- */

.tax-services .tax-service-card::before {
    content: "";
    position: absolute;

    width: 150px;
    height: 150px;

    right: -55px;
    bottom: -60px;

    z-index: 0;
    pointer-events: none;

    border-radius: 50%;

    border:
        1px solid rgba(25, 82, 39, .065);

    box-shadow:
        0 0 0 15px rgba(25, 82, 39, .018),
        0 0 0 30px rgba(212, 179, 106, .016),
        0 0 0 46px rgba(25, 82, 39, .012);
}

/* Give each card a slightly different rosette placement */

.tax-services .tax-service-individual::before {
    right: -70px;
    bottom: -68px;
}

.tax-services .tax-service-business::before {
    right: -48px;
    top: -68px;
    bottom: auto;
}

.tax-services .tax-service-preparation::before {
    right: -55px;
    bottom: -72px;
}

/* -------------------------------------------------------
   FEATURED GOLD CARD
------------------------------------------------------- */

.tax-services .tax-service-card.featured::after {
    opacity: .072;
}

.tax-services .tax-service-card.featured::before {
    border-color: rgba(198, 161, 91, .105);

    box-shadow:
        0 0 0 15px rgba(198, 161, 91, .024),
        0 0 0 30px rgba(25, 82, 39, .014),
        0 0 0 46px rgba(198, 161, 91, .015);
}

/* -------------------------------------------------------
   HOVER
------------------------------------------------------- */

.tax-services .tax-service-card {
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.tax-services .tax-service-card:hover::after {
    opacity: .085;
}

.tax-services .tax-service-card:hover::before {
    opacity: 1;
}

/* -------------------------------------------------------
   MOBILE
------------------------------------------------------- */

@media (max-width: 700px) {

    .tax-services .tax-service-card::after {
        background-size: 175% auto;
        opacity: .045;
    }

    .tax-services .tax-service-card::before {
        width: 120px;
        height: 120px;
    }
}

/* -------------------------------------------------------
   ACCESSIBILITY
------------------------------------------------------- */

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

    .tax-services .tax-service-card {
        transition: none !important;
    }
}