/*
 * Totally Taken Public Website
 * Shared Site Shell
 *
 * Shared navigation, page positioning, footer and utility controls.
 */


/* ==========================================================================
   SHARED DESKTOP PAGE POSITIONING
   ========================================================================== */

:root {
    --public-navigation-width: 270px;

    /*
     * Reserved bottom-right footprint for a future chat control.
     * Scroll-to-top deliberately sits above this space.
     */
    --public-chat-reserved-height: 82px;
}

.public-shell-content {
    position: relative;
    z-index: 1;
}


/* ==========================================================================
   SHARED HEADER
   ========================================================================== */

.public-site-header {
    z-index: 60;
}


/* ==========================================================================
   LEFT NAVIGATION COLUMN
   ========================================================================== */

.public-navigation-home {
    margin-bottom: 12px;

    padding-bottom: 15px !important;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.16);
}

.public-navigation-home span {
    display: inline-block;
}

.public-navigation > a,
.public-navigation-group > a {
    display: flex;

    align-items: center;

    gap: 9px;
}

.public-navigation > a [data-lucide],
.public-navigation-group > a [data-lucide] {
    display: block;

    width: 16px;
    height: 16px;

    flex: 0 0 16px;
}

.public-navigation > a svg,
.public-navigation-group > a svg {
    width: 16px;
    height: 16px;

    flex: 0 0 16px;

    stroke-width: 1.8;
}

.public-shell-icon {
    width: 17px;
    height: 17px;
}

.public-scroll-top svg {
    width: 20px;
    height: 20px;

    stroke-width: 2;
}


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

.public-site-footer {
    position: relative;
    z-index: 2;

    background:
        rgba(28, 28, 28, 0.34);

    backdrop-filter: blur(12px);
}

.public-site-footer-inner {
    max-width: 1200px;

    margin: 0 auto;

    padding:
        50px
        clamp(24px, 6vw, 80px)
        28px;
}

.public-site-footer-brand {
    display: flex;
    align-items: center;

    gap: 18px;

    max-width: 560px;
}

.public-site-footer-logo {
    width: 105px;
    height: auto;
}

.public-site-footer-brand strong {
    display: block;

    color: #ffffff;

    font-size: 1.05rem;
}

.public-site-footer-brand p {
    margin: 5px 0 0;

    color:
        rgba(255, 255, 255, 0.62);

    font-size: 0.9rem;
}

.public-site-footer-navigation {
    display: flex;
    flex-wrap: wrap;

    gap:
        10px
        24px;

    margin-top: 36px;
}

.public-site-footer-navigation a {
    color:
        rgba(255, 255, 255, 0.76);

    text-decoration: none;

    font-size: 0.9rem;
}

.public-site-footer-navigation a:hover,
.public-site-footer-navigation a:focus-visible {
    color: #ffffff;

    text-decoration: underline;

    text-underline-offset: 4px;
}

.public-site-footer-bottom {
    display: flex;
    justify-content: space-between;

    gap: 24px;

    margin-top: 34px;
    padding-top: 20px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.10);

    color:
        rgba(255, 255, 255, 0.48);

    font-size: 0.78rem;
}


/* ==========================================================================
   SCROLL TO TOP
   ========================================================================== */

.public-scroll-top {
    position: fixed;

    right: 28px;

    bottom:
        calc(
            var(--public-chat-reserved-height)
            + 28px
        );

    z-index: 80;

    width: 48px;
    height: 48px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;

    background:
        rgba(34, 34, 34, 0.54);

    border:
        1px solid
        rgba(255, 255, 255, 0.30);

    border-radius: 50%;

    backdrop-filter: blur(10px);

    opacity: 0;

    visibility: hidden;

    transform: translateY(8px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease,
        background 0.2s ease;
}

.public-scroll-top.is-visible {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}

.public-scroll-top:hover,
.public-scroll-top:focus-visible {
    opacity: 1;

    background:
        rgba(52, 52, 52, 0.72);
}


/* ==========================================================================
   REQUESTED VISUAL REFINEMENTS
   ========================================================================== */

/*
 * Let more photography show through content panels.
 */
.public-content-card {
    background:
        rgba(34, 34, 34, 0.43);
}

/*
 * Slightly reduce oversized public section titles.
 */
.public-content-card h2 {
    font-size:
        clamp(
            2rem,
            4.2vw,
            3.9rem
        );
}

.public-hero h1 {
    font-size:
        clamp(
            2.5rem,
            5.7vw,
            4.9rem
        );
}


/* ==========================================================================
   DESKTOP
   ========================================================================== */

@media (min-width: 901px) {

    /*
     * Permanent navigation column rather than a floating box.
     */
    .public-navigation {
        top: 0;
        bottom: 0;

        left: 0;

        width:
            var(--public-navigation-width);

        padding:
            124px
            26px
            36px;

        overflow-y: auto;

        border: 0;
        border-radius: 0;

        background:
            rgba(28, 28, 28, 0.34);

        backdrop-filter: blur(12px);

        transform: none;
    }

    /*
     * All public page content clears the permanent navigation column.
     * This also fixes the homepage title being hidden beneath it.
     */
    .public-shell-content {
        margin-left:
            var(--public-navigation-width);
    }

    .public-site-footer {
        margin-left:
            var(--public-navigation-width);
    }

    /*
     * Header logo owns the top-left area above the menu column.
     */
    .public-site-header {
        padding:
            22px
            28px;
    }

    .public-site-logo {
        width: 215px;
    }

    /*
     * Homepage hero remains left-aligned, but now starts within
     * the page area to the right of navigation.
     */
    .public-hero-content {
        margin-left:
            clamp(
                34px,
                5vw,
                72px
            );
    }

}


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

@media (max-width: 900px) {

    .public-shell-content,
    .public-site-footer {
        margin-left: 0;
    }

    .public-navigation {
        background:
            rgba(34, 34, 34, 0.54);
    }

    .public-site-footer {
        background:
            rgba(34, 34, 34, 0.54);
    }

    .public-content-card {
        background:
            rgba(34, 34, 34, 0.50);
    }

    .public-site-footer-inner {
        padding:
            40px
            22px
            24px;
    }

    .public-site-footer-brand {
        align-items: flex-start;
    }

    .public-site-footer-logo {
        width: 82px;
    }

    .public-site-footer-navigation {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            10px
            20px;
    }

    .public-site-footer-bottom {
        flex-direction: column;

        gap: 6px;
    }

    .public-scroll-top {
        right: 18px;

        bottom:
            calc(
                var(--public-chat-reserved-height)
                + 18px
            );

        width: 44px;
        height: 44px;
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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

    .public-scroll-top {
        transition: none;
    }

}

/* PROJECT PHOTO — PUBLIC CONTACT FORM */

.public-contact-form {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        22px
        24px;

    margin-top:
        34px;

    max-width:
        920px;
}

.public-contact-field {
    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;
}

.public-contact-field label {
    font-size:
        0.92rem;

    font-weight:
        600;

    letter-spacing:
        0.02em;
}

.public-contact-field input,
.public-contact-field textarea {
    width:
        100%;

    box-sizing:
        border-box;

    padding:
        13px
        14px;

    border:
        1px solid rgba(255, 255, 255, 0.26);

    border-radius:
        4px;

    background:
        rgba(0, 0, 0, 0.22);

    color:
        inherit;

    font:
        inherit;

    transition:
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
}

.public-contact-field input:hover,
.public-contact-field textarea:hover {
    border-color:
        rgba(255, 255, 255, 0.42);
}

.public-contact-field input:focus,
.public-contact-field textarea:focus {
    outline:
        none;

    border-color:
        rgba(255, 255, 255, 0.72);

    background:
        rgba(0, 0, 0, 0.30);

    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.10);
}

.public-contact-field textarea {
    min-height:
        150px;

    resize:
        vertical;
}

.public-contact-field:nth-of-type(5),
.public-contact-checkbox,
.public-contact-submit,
.public-contact-message,
.public-contact-error {
    grid-column:
        1 / -1;
}

.public-contact-checkbox {
    margin-top:
        2px;
}

.public-contact-checkbox label {
    display:
        flex;

    flex-direction:
        row;

    align-items:
        flex-start;

    gap:
        10px;

    font-weight:
        400;

    line-height:
        1.5;
}

.public-contact-checkbox input {
    width:
        auto;

    margin-top:
        4px;

    flex:
        0 0 auto;
}

.public-contact-submit {
    justify-self:
        start;

    border:
        0;

    cursor:
        pointer;

    font:
        inherit;
}

.public-contact-message,
.public-contact-error {
    padding:
        14px
        16px;

    margin-top:
        24px;

    border:
        1px solid rgba(255, 255, 255, 0.22);

    background:
        rgba(0, 0, 0, 0.18);

    line-height:
        1.5;
}

.public-contact-error {
    border-color:
        rgba(255, 255, 255, 0.34);
}

@media (max-width: 720px) {

    .public-contact-form {
        grid-template-columns:
            1fr;

        gap:
            18px;

        margin-top:
            26px;
    }

    .public-contact-field:nth-of-type(5),
    .public-contact-checkbox,
    .public-contact-submit,
    .public-contact-message,
    .public-contact-error {
        grid-column:
            auto;
    }

    .public-contact-field input,
    .public-contact-field textarea {
        padding:
            12px;
    }
}