/*
 * Perfect Landing 0.3.0
 * FYC Perfect Child presentation layer.
 *
 * The plugin renders a full document for its route, so the active WordPress
 * theme cannot visually redefine the landing page. The vocabulary intentionally
 * mirrors FYC Perfect Child / Perfect Theme contracts: --fyc-color-*,
 * .site-shell, #header, .header-layout, #nav-main, .menu-primary, #footer,
 * .footer-layout, and .site-credit.
 */

html {
    scroll-behavior: smooth;
}

body.perfect-landing-document {
    margin: 0;
    background: #fff;
}

#perfect-site,
#perfect-site *,
#perfect-site *::before,
#perfect-site *::after {
    box-sizing: border-box;
}

#perfect-site {
    /* Bridge FYC roles into a small Perfect-compatible public role layer. */
    --pt-color-background: var(--fyc-color-page-background);
    --pt-color-text: var(--fyc-color-text);
    --pt-color-accent: var(--fyc-color-accent);
    --pt-color-accent-text: var(--fyc-color-accent-text);
    --pt-color-header-background: var(--fyc-color-nav-background);
    --pt-color-header-text: var(--fyc-color-nav-text);
    --pt-color-footer-background: var(--fyc-color-footer-background);
    --pt-color-footer-text: var(--fyc-color-footer-text);

    min-height: 100vh;
    margin: 0;
    background: var(--fyc-color-page-background);
    color: var(--fyc-color-text);
    font-family: var(--fyc-font-body);
    font-size: 1rem;
    line-height: 1.65;
    text-align: left;
    text-rendering: optimizeLegibility;
}

#perfect-site :where(h1, h2, h3, h4) {
    margin-block: 0 0.65em;
    color: inherit;
    font-family: var(--fyc-font-heading);
    font-weight: 700;
    line-height: 1.16;
    text-wrap: balance;
}

#perfect-site h1 {
    font-size: clamp(2.3rem, 6vw, 4.75rem);
}

#perfect-site h2 {
    font-size: clamp(1.8rem, 4vw, 3rem);
}

#perfect-site p {
    margin-block: 0 1.15em;
}

#perfect-site a {
    color: inherit;
}

#perfect-site img {
    max-width: 100%;
    height: auto;
}

#perfect-site :focus-visible {
    outline: 0.2rem solid currentColor;
    outline-offset: 0.22rem;
}

.perfect-skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 999999;
    transform: translateY(-180%);
    padding: 0.7rem 1rem;
    background: var(--fyc-color-white);
    color: var(--fyc-color-black);
    font: 700 1rem/1.2 var(--fyc-font-body);
}

.perfect-skip-link:focus {
    transform: none;
}

#perfect-site .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#perfect-site .site-shell {
    width: min(calc(100% - 2rem), var(--fyc-site-width));
    margin-inline: auto;
}

/* ------------------------------------------------------------------ */
/* FYC top navigation/header                                           */
/* ------------------------------------------------------------------ */

#perfect-site #header {
    width: 100%;
    background: var(--fyc-color-nav-background);
    color: var(--fyc-color-nav-text);
}

#perfect-site .header-layout {
    display: flex;
    min-height: 4.5rem;
    align-items: center;
    justify-content: center;
}

#perfect-site #nav-main {
    width: 100%;
    font-family: var(--fyc-font-body);
}

#perfect-site .menu-primary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

#perfect-site #nav-main a {
    display: block;
    padding-block: 0.75rem;
    color: var(--fyc-color-nav-text);
    font-weight: 700;
    text-decoration: none;
}

#perfect-site #nav-main a:hover,
#perfect-site #nav-main a:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.28em;
}

#perfect-site .menu-toggle {
    display: none;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0.65rem;
    border: 0.12rem solid currentColor;
    border-radius: 0;
    background: transparent;
    color: var(--fyc-color-nav-text);
    cursor: pointer;
}

#perfect-site .menu-toggle__icon {
    display: grid;
    width: 1.35rem;
    gap: 0.25rem;
}

#perfect-site .menu-toggle__icon > span {
    display: block;
    height: 0.13rem;
    background: currentColor;
}

/* ------------------------------------------------------------------ */
/* FYC white logo block                                                */
/* ------------------------------------------------------------------ */

#perfect-site .fyc-logo-block {
    width: 100%;
    background: var(--fyc-color-logo-background);
    color: var(--fyc-color-logo-text);
}

#perfect-site .fyc-logo-inner {
    display: flex;
    min-height: clamp(11rem, 24vw, 18rem);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-block: clamp(2rem, 6vw, 4.5rem);
    text-align: center;
}

#perfect-site .fyc-logo-image {
    display: block;
    width: min(100%, var(--fyc-logo-max-width));
    max-height: 11rem;
    object-fit: contain;
}

#perfect-site .fyc-logo-fallback {
    margin: 0;
    font-family: var(--fyc-font-heading);
    font-size: clamp(2.1rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1;
}

#perfect-site .fyc-logo-tagline {
    max-width: 46rem;
    margin: 0;
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* FYC full-width page banner                                          */
/* ------------------------------------------------------------------ */

#perfect-site .fyc-page-banner {
    width: 100%;
    margin: 0;
    background: var(--fyc-color-white);
}

#perfect-site .fyc-page-banner img {
    display: block;
    width: 100%;
    max-height: 42rem;
    object-fit: cover;
}

/* ------------------------------------------------------------------ */
/* Main page content                                                    */
/* ------------------------------------------------------------------ */

#perfect-site #content {
    background: var(--fyc-color-page-background);
    color: var(--fyc-color-text);
}

#perfect-site .fyc-reading-column {
    width: min(100%, var(--fyc-reading-width));
}

#perfect-site .fyc-hero {
    padding-block: clamp(3.5rem, 8vw, 7rem);
    background: var(--fyc-color-page-background);
}

#perfect-site .fyc-eyebrow {
    margin: 0 0 0.75rem;
    color: var(--fyc-color-accent);
    font-family: var(--fyc-font-body);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

#perfect-site .fyc-hero-intro {
    color: var(--fyc-color-muted);
    font-size: clamp(1.08rem, 2vw, 1.3rem);
}

#perfect-site .fyc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

#perfect-site .fyc-button {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    padding: 0.72rem 1.15rem;
    border: 0.12rem solid var(--fyc-color-accent);
    border-radius: var(--fyc-radius);
    font-family: var(--fyc-font-body);
    font-weight: 800;
    text-decoration: none;
}

#perfect-site .fyc-button--primary {
    background: var(--fyc-color-accent);
    color: var(--fyc-color-accent-text);
}

#perfect-site .fyc-button--secondary {
    background: transparent;
    color: var(--fyc-color-accent);
}

#perfect-site .fyc-content-section {
    padding-block: clamp(3rem, 7vw, 6rem);
    background: var(--fyc-color-page-background);
    border-top: 1px solid color-mix(in srgb, var(--fyc-color-text) 12%, transparent);
}

#perfect-site .fyc-content-section p {
    max-width: 65ch;
    font-size: 1.075rem;
}

/* ------------------------------------------------------------------ */
/* FYC footer                                                           */
/* ------------------------------------------------------------------ */

#perfect-site #footer {
    width: 100%;
    padding-block: 2.75rem;
    background: var(--fyc-color-footer-background);
    color: var(--fyc-color-footer-text);
}

#perfect-site .footer-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#perfect-site .site-credit {
    margin: 0;
}

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

@media (max-width: 46rem) {
    #perfect-site .header-layout {
        display: grid;
        grid-template-columns: 1fr auto;
        min-height: 4.25rem;
        padding-block: 0.55rem;
    }

    #perfect-site .menu-toggle {
        display: inline-flex;
        grid-column: 2;
    }

    #perfect-site #nav-main {
        grid-column: 1 / -1;
    }

    .perfect-js #perfect-site #nav-main {
        display: none;
    }

    .perfect-js #perfect-site #header.is-nav-open #nav-main {
        display: block;
    }

    #perfect-site .menu-primary {
        display: grid;
        gap: 0;
        padding-top: 0.35rem;
    }

    #perfect-site .menu-primary .menu-item + .menu-item {
        border-top: 1px solid color-mix(in srgb, var(--fyc-color-nav-text) 28%, transparent);
    }

    #perfect-site #nav-main a {
        padding-block: 0.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    #perfect-site *,
    #perfect-site *::before,
    #perfect-site *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}