@import url("reset.css");
@import url("variables.css");
@import url("base.css");
@import url("brand-icons.css");

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

main {
    width: 100vw;
}

/* "+N" overflow bubble in the social-icon strip (render_socials() in
   includes/links_render.php). Deliberately light-touch: it only carries the
   `social-link` class (same as every real icon), so it automatically inherits
   whatever box styling — or lack of one — each theme already gives that
   class; this rule just sizes/weights the text so it reads well either way. */
.social-link-more {
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    cursor: default;
    color: inherit;
}

/* =====================================================================
   Connect block — QR (left) + Save-contact button (right), after the links.
   Rendered by includes/connect_block.php on every theme. Everything inherits
   the theme's text color (currentColor): the QR is drawn in that color on a
   TRANSPARENT background (so it inverts to light on dark themes, dark on the
   light theme), the label inherits it, and the button is a subtle glass chip
   built from currentColor — no hard-coded palette, so it matches every theme.
   ===================================================================== */
.connect {
    width: clamp(300px, 80%, 500px);
    margin: var(--spacing-lg) auto var(--spacing-page-y);
    display: flex;
    gap: var(--spacing-md);
    align-items: stretch; /* Save button matches the QR block's height */
    color: inherit;
}
.connect-qr {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.connect-qr-canvas {
    display: block;
    width: 156px;
    height: 156px;
    image-rendering: pixelated; /* keep module edges crisp when scaled down */
}
.connect-qr-label {
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: 0.3px;
    opacity: 0.7;
}
.connect-save {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    padding: 0 20px; /* vertical size comes from stretch, matching the QR */
    font-weight: 600;
    font-size: var(--font-size-lg);
    letter-spacing: 0.2px;
    line-height: 1.2;
    border-radius: var(--border-radius);
    /* themed, translucent — falls back to a plain currentColor border if
       color-mix isn't supported */
    border: 1px solid currentColor;
    border-color: color-mix(in srgb, currentColor 30%, transparent);
    background: color-mix(in srgb, currentColor 6%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.connect-save i { font-size: 1.25em; opacity: 0.85; }
.connect-save:hover {
    background: color-mix(in srgb, currentColor 14%, transparent);
    border-color: color-mix(in srgb, currentColor 55%, transparent);
    transform: translateY(-1px);
}
.connect-save:active { transform: translateY(0); }

/* Uniform, lightly-rounded corners on the Save-contact button across every
   theme. Same specificity as the per-theme skins but declared later (this file
   loads after the theme's CSS), so it wins the radius without touching their
   colours/borders. */
.connect .connect-save { border-radius: 8px; }

@media (max-width: 420px) {
    .connect { gap: var(--spacing-sm); }
    .connect-qr-canvas { width: 128px; height: 128px; }
    .connect-save { padding: 0 14px; font-size: var(--font-size-md); }
}