/* === Linktree page styles ===
 *
 * Loaded only by page-homelinktree.hbs. Static styling lives here; dynamic
 * values (text color, logo size, button background, social colors, etc.) are
 * passed in as CSS custom properties by the inline <style> block in
 * page-homelinktree.hbs and consumed below via var().
 *
 * Background and button-hover background still live inline because their
 * conditional logic (color/gradient/image with light-dark color-mix variants)
 * doesn't fit cleanly into a single custom property.
 */

/* Wrapper: full-screen overlay that scrolls inside its own bounds when content
   exceeds the viewport. */
.linktree-page-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Default background; overridden inline when homeBackgroundType is set in admin. */
    background: var(--background);
}

/* Subtle dot pattern overlay tying the linktree page to Mono's .hero
   aesthetic. Reuses Mono's var(--background-pattern) directly so the
   dot color auto-adapts to prefers-color-scheme:
     light → rgb(245, 245, 245) dots (faint on white bg)
     dark  → rgb(31, 37, 46) dots (faint on dark bg)
   Sits as a fixed-position pseudo-element so it stays in place while
   content scrolls inside the wrapper, and so it layers on top of any
   background type (color/gradient/image) without needing to know
   about each. */
.linktree-page-wrapper::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: var(--background-pattern);
    background-position: 0 0, 6px 6px;
    background-size: 12px 12px;
    pointer-events: none;
    z-index: 1;
}

/* Mono's --background-pattern uses 1px-stop radial gradients which renders
   reliably on desktop but unpredictably on high-DPR mobile devices — the
   1px solid-to-transparent stop anti-aliases differently across mobile
   browsers, making the dots look enlarged or smudged. Hide the overlay
   on small viewports rather than fight the rendering quirks. The page
   still reads as the right look without it on phone screens. */
@media (max-width: 768px) {
    .linktree-page-wrapper::before {
        display: none;
    }
}

.linktree-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: transparent;
    color: var(--linktree-text, var(--color-darker));
    font-family: var(--font-body);
    position: relative;
    z-index: 1001;
}

/* Drop the framework page borders so the linktree overlay reads as full-bleed. */
.linktree-page--fullwidth {
    border-left: none !important;
    border-right: none !important;
}

.linktree-container {
    max-width: 680px;
    width: 100%;
    text-align: center;
}

.linktree-header {
    margin-bottom: 2rem;
    margin-top: var(--linktree-logo-top, 0);
}

.linktree-logo {
    max-width: var(--linktree-logo-size, 120px);
    height: auto;
}

.linktree-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: var(--linktree-text, var(--color-darker));
    text-decoration: none;
}

.linktree-profile {
    margin-bottom: 2rem;
}

/* Header banner treatment: image displays uncropped, scales with viewport.
   For a circular cropped avatar instead (requires a square source image),
   change the <img> class in page-homelinktree.hbs to linktree-profile-img-circle. */
.linktree-profile-img {
    display: block;
    width: 100%;
    max-width: 400px;
    height: auto;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.linktree-profile-img-circle {
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-medium);
}

.linktree-content {
    margin-bottom: 2rem;
    line-height: 1.6;
    color: var(--linktree-text, var(--color-darker));
}

.linktree-content h1,
.linktree-content h2,
.linktree-content h3,
.linktree-content h4,
.linktree-content h5,
.linktree-content h6 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--linktree-text, var(--color-darker));
}

.linktree-content p {
    margin-bottom: 1rem;
    color: var(--linktree-text-soft, var(--color-dark));
}

.linktree-menu {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.linktree-btn {
    display: block;
    padding: 1rem 2rem;
    text-decoration: none;
    color: #ffffff;
    background: var(--linktree-btn-bg, #1a1a1a);
    border: 1px solid #333333;
    font-size: 1.1rem;
    font-weight: 500;
    transition: var(--transition);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.linktree-btn.rounded {
    border-radius: 12px;
}

.linktree-btn.square {
    border-radius: 0;
}

/* Hover background is set inline based on homeButtonHoverType (color / gradient
   / image). Everything else about the hover state is static and lives here. */
.linktree-btn:hover {
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.linktree-btn i {
    margin-right: 0.5rem;
}

.linktree-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.linktree-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--linktree-social-bg, rgba(255, 255, 255, 0.1));
    color: var(--linktree-social-color, #ffffff);
    text-decoration: none;
    transition: var(--transition);
    font-size: var(--linktree-social-icon-size, 1.2rem);
    border: 1px solid var(--color-light);
}

.linktree-social-link:hover {
    background: var(--linktree-social-hover-bg, rgba(255, 255, 255, 0.2));
    color: var(--linktree-social-color, #ffffff);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .linktree-page-wrapper {
        padding-top: 2rem; /* Prevent logo cutoff at top */
    }

    .linktree-page {
        padding: 0.5rem 1rem;
        padding-bottom: 6rem; /* Extra room at bottom for social icons */
        padding-top: 1rem;
    }

    .linktree-header {
        margin-top: 1rem;
    }

    .linktree-container {
        max-width: 100%;
    }

    .linktree-btn {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }

    .linktree-social-link {
        width: 45px;
        height: 45px;
        font-size: var(--linktree-social-icon-size-mobile, var(--linktree-social-icon-size, 1.1rem));
    }
}