/* =================================================================
   BaseCRM — דף הקישורים הציבורי (/link/<slug>)
   Self-contained: no Bootstrap, no framework, one file.

   The four palettes are the SAME four the landing pages use, so a business
   whose /p/ page is "elegant" gets an /link/ page that looks related rather
   than like a different company. Values are duplicated rather than imported
   because @import costs a round trip on a page whose whole job is opening
   fast on a phone, from an Instagram bio, on mobile data.
   ================================================================= */

:root {
    --lh-primary: #d97706;
    --lh-accent: #f59e0b;
    --lh-bg: #faf8f3;
    --lh-surface: #ffffff;
    --lh-ink: #1f1b16;
    --lh-ink-muted: #6b625a;
    --lh-border: #ecdfd0;
    --lh-radius: 16px;
    --lh-shadow: 0 2px 10px rgba(40, 28, 12, .06);
    --lh-shadow-hover: 0 10px 26px rgba(40, 28, 12, .13);
}

[data-theme="cool"] {
    --lh-primary: #0e7c8a;
    --lh-accent: #0891b2;
    --lh-bg: #f2f8fa;
    --lh-surface: #ffffff;
    --lh-ink: #0f2e33;
    --lh-ink-muted: #4d6469;
    --lh-border: #d7e7eb;
}

[data-theme="elegant"] {
    --lh-primary: #1a1a1a;
    --lh-accent: #9a7b32;
    --lh-bg: #faf8f4;
    --lh-surface: #ffffff;
    --lh-ink: #1a1a1a;
    --lh-ink-muted: #5f5f5f;
    --lh-border: #e6dfd3;
}

[data-theme="bold"] {
    --lh-primary: #be1e63;
    --lh-accent: #6d28d9;
    --lh-bg: #faf5fb;
    --lh-surface: #ffffff;
    --lh-ink: #1a0a24;
    --lh-ink-muted: #5b4966;
    --lh-border: #efdef5;
}

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

body {
    margin: 0;
    min-height: 100vh;
    padding: 40px 20px 56px;
    background: var(--lh-bg);
    color: var(--lh-ink);
    /* Frank Ruhl Libre is a classic Hebrew serif and carries the name; Heebo
       does the working text. Both fall back through real system stacks, so a
       blocked Google Fonts request costs the look and not the page. */
    font-family: 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.lh-shell {
    max-width: 460px;
    margin: 0 auto;
}

/* ---- identity ---- */
.lh-head { text-align: center; margin-bottom: 28px; }

/*
 * The frame follows the logo, instead of the logo being made to fit the frame.
 *
 * This was a fixed 92px circle with object-fit:cover, which fills the circle by
 * cropping whatever does not fit — so a wide logo lost its left and right edges,
 * strapline included. Switching to `contain` inside a circle only trades one
 * problem for another: a 2:1 logo becomes a thin strip floating in a lot of
 * white, which reads as a mistake too.
 *
 * So there is no circle. Width and height are auto within a max box, so the
 * image renders at its own aspect ratio and is never cropped at any ratio: a
 * square logo comes out a rounded square, a wide one comes out a wide plate.
 * The letter fallback below keeps its circle — a single initial has no aspect
 * ratio to respect.
 */
.lh-avatar {
    width: auto;
    height: auto;
    max-width: 210px;
    max-height: 104px;
    object-fit: contain;
    border-radius: 18px;
    padding: 8px;
    background: var(--lh-surface);
    box-shadow: var(--lh-shadow);
    margin-bottom: 14px;
}

.lh-avatar--letter {
    display: inline-flex; align-items: center; justify-content: center;
    width: 92px; height: 92px;
    padding: 0;
    border-radius: 50%;
    border: 3px solid var(--lh-border);
    font-family: 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
    font-size: 2.2rem; font-weight: 700;
    color: var(--lh-primary);
}

.lh-name {
    font-family: 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 6px;
    overflow-wrap: break-word;
    word-break: normal;
}

.lh-tagline {
    margin: 0;
    color: var(--lh-ink-muted);
    font-size: .95rem;
    overflow-wrap: break-word;
    word-break: normal;
}

/* ---- the links ---- */
.lh-links { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }

.lh-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 12px 18px;
    background: var(--lh-surface);
    border: 1px solid var(--lh-border);
    border-radius: var(--lh-radius);
    box-shadow: var(--lh-shadow);
    color: var(--lh-ink);
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.lh-link:hover,
.lh-link:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--lh-shadow-hover);
    border-color: var(--lh-primary);
}
.lh-link:active { transform: translateY(0); }
.lh-link:focus-visible { outline: 2px solid var(--lh-primary); outline-offset: 3px; }

.lh-link-icon {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: var(--lh-bg);
    color: var(--lh-primary);
    font-size: 1.1rem;
}

.lh-link-text { flex: 1 1 auto; min-width: 0; }
/* Both are spans so the whole row can stay a single <a>; block makes them
   stack the way a label over a hint has to. */
.lh-link-label {
    display: block;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: break-word; word-break: normal;
}
.lh-link-hint {
    display: block;
    font-size: .82rem;
    line-height: 1.35;
    color: var(--lh-ink-muted);
    overflow-wrap: break-word; word-break: normal;
}

/* "Forward" is left in RTL and right in LTR. */
.lh-link-chev { flex: 0 0 auto; color: var(--lh-ink-muted); font-size: .85rem; }
[dir="ltr"] .lh-link-chev { transform: scaleX(-1); }

/* ---- social row ---- */
.lh-social {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: 10px; margin-bottom: 30px;
}

.lh-social a {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--lh-surface);
    border: 1px solid var(--lh-border);
    color: var(--lh-primary);
    font-size: 1.15rem;
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease;
}
.lh-social a:hover,
.lh-social a:focus-visible { transform: translateY(-2px); border-color: var(--lh-primary); }
.lh-social a:focus-visible { outline: 2px solid var(--lh-primary); outline-offset: 2px; }

/* ---- save contact + share + footer ---- */
.lh-actions {
    display: flex; justify-content: center; align-items: center;
    flex-wrap: wrap; gap: 10px;
    margin-bottom: 26px;
}

/* "שמירת איש קשר" — the primary action down here, so it carries the accent as
   a BORDER and keeps ink for the text. The accent measures 3.19:1 on white in
   the warm palette: enough for a 1px boundary (WCAG 1.4.11 wants 3:1 for a UI
   component) and nowhere near the 4.5:1 that text needs. Painting the label in
   it would have been the exact "faded ink on a colour" mistake the contrast
   sweep spent a week undoing. */
.lh-save {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px;
    min-height: 44px;
    background: var(--lh-surface);
    border: 1px solid var(--lh-primary);
    border-radius: 999px;
    color: var(--lh-ink);
    font: inherit; font-size: .86rem; font-weight: 600;
    text-decoration: none;
    box-shadow: var(--lh-shadow);
    transition: transform .16s ease, box-shadow .16s ease;
}
.lh-save:hover { transform: translateY(-2px); box-shadow: var(--lh-shadow-hover); }
.lh-save:active { transform: translateY(0); }
.lh-save:focus-visible { outline: 2px solid var(--lh-primary); outline-offset: 3px; }
/* The icon inherits the ink rather than the accent — same reason as above. */
.lh-save i { color: inherit; }

.lh-share {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px;
    min-height: 44px;
    background: transparent;
    border: 1px solid var(--lh-border);
    border-radius: 999px;
    color: var(--lh-ink-muted);
    font: inherit; font-size: .86rem;
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease;
}
.lh-share:hover, .lh-share:focus-visible { color: var(--lh-primary); border-color: var(--lh-primary); }

.lh-foot { text-align: center; font-size: .78rem; color: var(--lh-ink-muted); }
.lh-foot a { color: var(--lh-ink-muted); text-decoration: none; border-bottom: 1px solid var(--lh-border); }
.lh-foot a:hover { color: var(--lh-primary); }

/* Screen-reader-only text.
   🔴 Clipped in place, never parked at left:-9999px: on a dir="rtl" page a
   negative offset is SCROLLABLE, and one such rule added ~9,700px of horizontal
   scroll to this product before. */
.lh-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.lh-empty {
    text-align: center;
    color: var(--lh-ink-muted);
    padding: 26px 16px;
    border: 1px dashed var(--lh-border);
    border-radius: var(--lh-radius);
    margin-bottom: 30px;
}

/* ---- dark ---- */
@media (prefers-color-scheme: dark) {
    :root {
        --lh-bg: #17140f;
        --lh-surface: #211c16;
        --lh-ink: #f5f1ea;
        --lh-ink-muted: #b3a897;
        --lh-border: #362e24;
        --lh-primary: #f0a53a;
        --lh-shadow: 0 2px 10px rgba(0, 0, 0, .35);
        --lh-shadow-hover: 0 10px 26px rgba(0, 0, 0, .5);
    }
    [data-theme="cool"] {
        --lh-bg: #0d1a1d; --lh-surface: #14262a; --lh-ink: #eaf6f8;
        --lh-ink-muted: #9db6bb; --lh-border: #1f3a40; --lh-primary: #4fd1c5;
    }
    [data-theme="elegant"] {
        --lh-bg: #131211; --lh-surface: #1c1b19; --lh-ink: #f2efe9;
        --lh-ink-muted: #a9a396; --lh-border: #2e2b25; --lh-primary: #d9b871;
    }
    [data-theme="bold"] {
        --lh-bg: #170d1b; --lh-surface: #221527; --lh-ink: #f7ecfa;
        --lh-ink-muted: #b79ec2; --lh-border: #382542; --lh-primary: #f472b6;
    }
    .lh-avatar { border-color: var(--lh-border); }
}

/* ---- motion ---- */
@media (prefers-reduced-motion: no-preference) {
    .lh-link, .lh-head, .lh-social, .lh-actions {
        animation: lh-rise .42s cubic-bezier(.22, 1, .36, 1) backwards;
    }
    .lh-link:nth-child(1) { animation-delay: .04s; }
    .lh-link:nth-child(2) { animation-delay: .08s; }
    .lh-link:nth-child(3) { animation-delay: .12s; }
    .lh-link:nth-child(4) { animation-delay: .16s; }
    .lh-link:nth-child(5) { animation-delay: .20s; }
    .lh-link:nth-child(n+6) { animation-delay: .24s; }
    .lh-social { animation-delay: .28s; }
    .lh-actions { animation-delay: .32s; }
}

@keyframes lh-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 420px) {
    body { padding: 28px 16px 44px; }
    .lh-avatar { max-width: 180px; max-height: 92px; }
    .lh-name { font-size: 1.5rem; }
    .lh-link { padding: 11px 14px; }
}