/*
 * Magic-link Email Confirmation V2 Page-Specific Styles
 * Centered single-column layout (no split / 3D graphic).
 * Common styles (brand, header, subtext, links, toggle) are in common-v2.css
 * and info-v2.css; this file only provides the full-screen centered container.
 */

/* ============================================
   Centered Container
   ============================================ */
#kc-email-confirmation-container-v2 {
    display: flex;
    min-height: 100vh;
    width: 100vw;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: var(--eds-space-050);  /* 8px */
    background-color: var(--v2-bg-body);
    /* This container is not in the shared :has() font selectors in common-v2.css,
       so apply the v2 Inter font here; it cascades to all descendants. */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-optical-sizing: auto;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'ss01' on, 'ss02' on, 'cv11' on;
}

#kc-email-confirmation-container-v2.dark {
    background: #1a1a1a;
}

/* ============================================
   Centered content overrides
   The shared .kc-info-* classes are tuned for the split layout (left-aligned,
   width: 50%, margin-left). Reset those for the centered single-column page.
   ============================================ */
#kc-email-confirmation-container-v2 .kc-info-header-v2 {
    margin-left: 0;
}

#kc-email-confirmation-container-v2 .kc-info-header-v2 h1,
#kc-email-confirmation-container-v2 .kc-info-subtext-v2 {
    /* PatternFly sets an explicit font-family on h1/p that beats body inheritance,
       so force Inter here. */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#kc-email-confirmation-container-v2 .kc-info-header-v2 h1 {
    width: 100%;
    text-align: center;
    font-weight: 700;
}

#kc-email-confirmation-container-v2 .kc-info-subtext-v2 {
    margin-left: 0;
    text-align: center;
    font-size: var(--eds-size-100); /* ~16px, larger than the default ~14px */
    /* Darker than the default secondary grey; primary token stays dark-mode aware. */
    color: var(--v2-color-text-primary);
}

/* Logo inverts in dark mode, matching the info page */
#kc-email-confirmation-container-v2.dark .kc-info-brand-v2 .kc-logo-v2 {
    filter: invert(1) brightness(1.2);
}

/* ============================================
   Theme Toggle - dark-mode icon swap
   (positioning/base styles inherited from #theme-toggle-v2 in common-v2.css)
   ============================================ */
#kc-email-confirmation-container-v2.dark #theme-toggle-v2 .sun-icon {
    display: none;
}

#kc-email-confirmation-container-v2.dark #theme-toggle-v2 .moon-icon {
    display: block;
}