@import '_content/CymruBlazor/CymruBlazor.qivenv2xtr.bundle.scp.css';

/* /Layout/DemoFooter.razor.rz.scp.css */
/* ── DemoFooter ───────────────────────────────────────────────────────────
   CyFooter (library) supplies the <footer> chrome, background, copyright,
   and .cy-footer__links flex row itself - each .cb-footer-col below is a
   direct ChildContent child, so it becomes one flex item in that row,
   giving the 4-column layout from the design spec without touching any
   library CSS.
   ========================================================================== */

.cb-footer-col[b-3sbvgu38fy] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 10rem;
}

.cb-footer-col__heading[b-3sbvgu38fy] {
    margin: 0 0 0.2rem;
    font-size: var(--cymru-font-size-xs, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
}

.cb-footer-col a[b-3sbvgu38fy] {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: var(--cymru-font-size-sm, 0.875rem);
    opacity: 0.9;
}

.cb-footer-col a:hover[b-3sbvgu38fy] {
    opacity: 1;
    text-decoration-thickness: 2px;
}

.cb-footer-col a:focus-visible[b-3sbvgu38fy] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 3px;
}
/* /Pages/Components/Content/IconRegistryPage.razor.rz.scp.css */
/* =========================================================================
   STRICT OUTLINE ICON ENFORCEMENT
   Prevents solid fill inheritance across SVG paths, shapes, and wrappers.
   ========================================================================= */

[b-nsk3dffipc] svg.cy-icon {
    display: inline-block !important;
    vertical-align: middle !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2px !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    box-sizing: content-box !important;
}

[b-nsk3dffipc] svg.cy-icon * {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: inherit !important;
    stroke-linecap: inherit !important;
    stroke-linejoin: inherit !important;
}

/* =========================================================================
   PREVIEW WORKBENCH
   ========================================================================= */

.cb-workbench-preview[b-nsk3dffipc] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: 2rem;
    background-color: var(--cb-bg-surface);
    background-image: radial-gradient(var(--cb-bg-canvas-dots) 1px, transparent 1px);
    background-size: 16px 16px;
    border: 1px solid var(--cb-border-subtle);
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.cb-preview-icon-wrapper[b-nsk3dffipc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cb-text-primary);
    transition: transform 0.15s ease-in-out;
}

/* =========================================================================
   DOMAIN GROUPS & GALLERY TILES (Matching Figma Grid)
   ========================================================================= */

.cb-icon-domain-group[b-nsk3dffipc] {
    margin-top: 2rem;
}

.cb-icon-domain-header[b-nsk3dffipc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--cb-border-subtle);
}

.cb-icon-domain-title[b-nsk3dffipc] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cb-text-primary);
}

.cb-icon-domain-count[b-nsk3dffipc] {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cb-text-muted);
}

.cb-icon-grid[b-nsk3dffipc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 0.625rem;
}

/* Gallery Tile Button */
.cb-icon-tile[b-nsk3dffipc] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 0.35rem 0.65rem;
    min-height: 80px;
    background-color: var(--cb-bg-surface);
    border: 1px solid var(--cb-border-subtle);
    border-radius: 8px;
    cursor: pointer;
    box-sizing: border-box;
    color: var(--cb-text-primary);
    transition: border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out, background-color 0.12s ease-in-out;
}

.cb-icon-tile:hover[b-nsk3dffipc] {
    border-color: var(--cb-border-focus);
    background-color: var(--cb-bg-subtle);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.cb-icon-tile--active[b-nsk3dffipc] {
    border-color: var(--cb-border-focus);
    background-color: var(--cb-bg-muted);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cb-border-focus) 25%, transparent);
}

.cb-icon-tile__graphic[b-nsk3dffipc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    color: currentColor;
}

.cb-icon-tile__name[b-nsk3dffipc] {
    font-size: 0.6875rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: var(--cb-text-muted);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
    padding: 0 0.25rem;
}

.cb-icon-tile__toast[b-nsk3dffipc] {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    background-color: var(--cb-brand-primary);
    color: var(--cb-text-on-accent);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    animation: fadeIn-b-nsk3dffipc 0.15s ease-in-out;
}

@keyframes fadeIn-b-nsk3dffipc {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Pages/GettingStarted/GettingStarted.razor.rz.scp.css */
/* GettingStarted page — no scoped styles needed; all rules are in demo.css */
/* /Pages/Home.razor.rz.scp.css */
/* ── Home page ────────────────────────────────────────────────────────────── */

.cb-home[b-ey0ifzwk2n] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ── Hero ── */
.cb-home__hero[b-ey0ifzwk2n] {
    background: linear-gradient(
        135deg,
        var(--cymru-navy-900, #1b294a) 0%,
        var(--cymru-blue-800, #325083) 50%,
        var(--cymru-cyan-900, #0a6a84) 100%
    );
    color: #ffffff;
    padding: var(--cymru-space-12, 3rem) var(--cymru-space-8, 2rem);
    border-radius: var(--cymru-radius-lg, 12px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    text-align: center;
    margin-bottom: var(--cymru-space-10, 2.5rem);
}

/* Subtle background glowing accent */
.cb-home__hero[b-ey0ifzwk2n]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 140%;
    height: 200%;
    background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 65%);
    pointer-events: none;
}

.cb-home__hero-content[b-ey0ifzwk2n] {
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cb-home__hero-badge-wrap[b-ey0ifzwk2n] {
    display: flex;
    justify-content: center;
    margin-bottom: var(--cymru-space-4, 1rem);
}

.cb-home__badge[b-ey0ifzwk2n] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--cymru-space-1, 4px) var(--cymru-space-3, 12px);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 9999px;
    font-size: var(--cymru-font-size-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #ffffff;
    backdrop-filter: blur(6px);
}

.cb-home__title[b-ey0ifzwk2n] {
    font-size: clamp(2.25rem, 4.5vw, 3.75rem);
    font-weight: 800;
    margin: 0 0 var(--cymru-space-3, 0.75rem) 0;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #ffffff;
}

.cb-home__subtitle[b-ey0ifzwk2n] {
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    margin: 0 0 var(--cymru-space-6, 1.5rem) 0;
    max-width: 58ch;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.6;
    font-weight: 400;
}

.cb-home__actions[b-ey0ifzwk2n] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cymru-space-4, 1rem);
    justify-content: center;
    margin-bottom: var(--cymru-space-6, 1.5rem);
}

/* The CTAs are now rendered by the CyButton child component (see Home.razor),
   so these selectors need ::deep to reach past its own CSS-isolation scope.
   We also restate padding/border/box-shadow/text-decoration explicitly to
   fully override CyButton's own scoped button styling (base .cy-button plus
   the Tertiary variant), rather than relying on it to stay out of the way. */
.cb-home__hero[b-ey0ifzwk2n]  .cb-demo-btn--primary {
    padding: 0.65rem 1.25rem;
    border: none;
    border-radius: var(--docs-code-radius);
    background-color: #ffffff;
    color: var(--cymru-navy-900, #1b294a);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.cb-home__hero[b-ey0ifzwk2n]  .cb-demo-btn--primary:hover {
    background-color: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    text-decoration: none;
}

.cb-home__hero[b-ey0ifzwk2n]  .cb-demo-btn--secondary {
    padding: 0.65rem 1.25rem;
    border-radius: var(--docs-code-radius);
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #ffffff;
    box-shadow: none;
    text-decoration: none;
    transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.cb-home__hero[b-ey0ifzwk2n]  .cb-demo-btn--secondary:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #ffffff;
    transform: translateY(-1px);
    text-decoration: none;
}

.cb-home__tech-badges[b-ey0ifzwk2n] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.cb-home__tech-badges .cb-badge[b-ey0ifzwk2n] {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.25rem 0.65rem;
    border-radius: var(--cymru-radius-sm, 4px);
}

/* ── Feature grid ── */
.cb-home__features[b-ey0ifzwk2n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--cymru-space-6, 1.5rem);
    margin-bottom: var(--cymru-space-12, 3rem);
    align-items: stretch;
}

.cb-home__feature[b-ey0ifzwk2n] {
    display: flex;
    flex-direction: column;
    padding: var(--cymru-space-6, 1.5rem);
    border: 1px solid var(--cymru-color-border, #d8dde0);
    border-radius: var(--cymru-radius-lg, 12px);
    background: var(--docs-card-surface, var(--cymru-color-surface, #ffffff));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.cb-home__feature:hover[b-ey0ifzwk2n] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
    border-color: var(--cymru-cyan-700, #12a3c9);
}

.cb-home__feature-icon[b-ey0ifzwk2n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    color: #ffffff;
    margin-bottom: var(--cymru-space-4, 1rem);
    line-height: 1;
    align-self: flex-start;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.cb-home__feature-title[b-ey0ifzwk2n] {
    font-size: var(--cymru-font-size-lg, 1.25rem);
    font-weight: 700;
    margin: 0 0 var(--cymru-space-2, 0.5rem) 0;
    color: var(--docs-text-primary, var(--cymru-color-text, #212b32));
}

.cb-home__feature-body[b-ey0ifzwk2n] {
    margin: 0;
    color: var(--docs-text-muted, var(--cymru-color-text-muted, #4c6272));
    font-size: 0.925rem;
    line-height: 1.6;
    flex: 1;
}

/* ── Quick start ── */
.cb-home__quick-start[b-ey0ifzwk2n] {
    padding-top: var(--cymru-space-8, 2rem);
    border-top: 1px solid var(--cymru-color-border, #d8dde0);
    margin-bottom: var(--cymru-space-12, 3rem);
}

.cb-home__section-title[b-ey0ifzwk2n] {
    font-size: 1.65rem;
    font-weight: 700;
    margin: 0 0 var(--cymru-space-6, 1.5rem) 0;
    color: var(--docs-text-primary, var(--cymru-color-text, #212b32));
}