/**
 * @file
 * F-Skill Entry Page — Frictionless Registration.
 * Instagram/Notion-style minimal entry. Maximum conversion.
 *
 * NOTE: !important is used extensively because the Aristotle theme
 * applies aggressive default styles to forms. Without !important,
 * the entry card renders as unstyled Drupal form elements.
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
    --fskill-entry-bg-start: #faf7f5;
    --fskill-entry-bg-mid: #f3ece6;
    --fskill-entry-bg-end: #ede4db;
    --fskill-entry-text: #1a1a2e;
    --fskill-entry-muted: #8b8b9e;
    --fskill-entry-border: #e0ddd9;
    --fskill-entry-card-bg: rgba(255, 255, 255, 0.92);
    --fskill-entry-radius: 24px;
    --fskill-entry-input-radius: 12px;
    --fskill-entry-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --fskill-entry-serif: 'Cormorant Garamond', Georgia, serif;
}

/* ============================================================
   FULL-PAGE BACKGROUND — Override ALL theme layout
   ============================================================ */
body.path-user.page-user-register .layout-content,
body.path-user .region-content,
body.page-user-register main,
body.page-user-register .page-main,
.path-user .layout-content {
    background: linear-gradient(160deg, var(--fskill-entry-bg-start) 0%, var(--fskill-entry-bg-mid) 40%, var(--fskill-entry-bg-end) 100%) !important;
    min-height: 100vh !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 20px !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Soft ambient overlay */
body.path-user.page-user-register .layout-content::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(212, 165, 116, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(233, 69, 96, 0.04) 0%, transparent 50%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* ============================================================
   HIDE ALL THEME CHROME — Nav, Sidebar, Title, Breadcrumbs
   ============================================================ */
body.path-user.page-user-register .region-sidebar-first,
body.path-user.page-user-register .region-sidebar-second,
body.path-user.page-user-register .content-header,
body.path-user.page-user-register .breadcrumb,
body.path-user.page-user-register .tabs,
body.path-user.page-user-register .page-title,
body.path-user.page-user-register h1.page-title,
body.path-user.page-user-register .block-page-title-block {
    display: none !important;
}

/* ============================================================
   RESET WRAPPER — The theme wraps all form children inside
   .user-form-wrapper.  Our entry card lives inside it, so we
   must NOT hide it.  Instead, strip its default styling so it
   acts as a transparent pass-through container.
   ============================================================ */
form.user-register-form.fskill-entry .user-form-wrapper {
    display: block !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* ============================================================
   THE FORM ITSELF
   ============================================================ */
form.user-register-form.fskill-entry {
    position: relative !important;
    z-index: 1 !important;
    max-width: 440px !important;
    width: 100% !important;
    margin: 0 auto !important;
    font-family: var(--fskill-entry-font) !important;
    -webkit-font-smoothing: antialiased !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================
   ENTRY CARD — Glassmorphic Container
   ============================================================ */
form.fskill-entry .fskill-entry-card {
    background: var(--fskill-entry-card-bg) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-radius: var(--fskill-entry-radius) !important;
    padding: 48px 40px 40px !important;
    box-shadow:
        0 8px 32px rgba(26, 26, 46, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    text-align: center !important;
}

/* ============================================================
   BRAND HEADER
   ============================================================ */
.fskill-entry-brand {
    font-family: var(--fskill-entry-serif) !important;
    font-size: 38px !important;
    font-weight: 600 !important;
    color: var(--fskill-entry-text) !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
}

.fskill-entry-tagline {
    font-size: 15px !important;
    color: var(--fskill-entry-muted) !important;
    font-weight: 400 !important;
    margin-bottom: 36px !important;
    letter-spacing: 0.02em !important;
    line-height: 1.5 !important;
    font-family: var(--fskill-entry-font) !important;
}

/* ============================================================
   GOOGLE BUTTON — Primary CTA
   ============================================================ */
.fskill-btn-google-signin {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    height: 54px !important;
    background: #ffffff !important;
    border: 1.5px solid #dadce0 !important;
    border-radius: 14px !important;
    font-family: var(--fskill-entry-font) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #3c4043 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 0 24px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.fskill-btn-google-signin:hover {
    background: #f8f9fa !important;
    border-color: #c4c7cc !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px) !important;
}

.fskill-btn-google-signin:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

.fskill-google-icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

/* ============================================================
   DIVIDER
   ============================================================ */
.fskill-entry-divider {
    display: flex !important;
    align-items: center !important;
    margin: 28px 0 !important;
    gap: 16px !important;
}

.fskill-entry-divider::before,
.fskill-entry-divider::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, #d9d4cf, transparent) !important;
}

.fskill-entry-divider span {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #a8a4a0 !important;
    text-transform: lowercase !important;
    letter-spacing: 0.05em !important;
    font-family: var(--fskill-entry-font) !important;
}

/* ============================================================
   EMAIL BUTTON — Secondary CTA
   ============================================================ */
.fskill-btn-email-entry {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 48px !important;
    background: transparent !important;
    border: none !important;
    font-family: var(--fskill-entry-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #6b6b7e !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    border-radius: var(--fskill-entry-input-radius) !important;
    letter-spacing: 0.01em !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-decoration: none !important;
}

.fskill-btn-email-entry:hover {
    color: var(--fskill-entry-text) !important;
    background: rgba(26, 26, 46, 0.04) !important;
}

.fskill-btn-email-entry svg {
    width: 16px !important;
    height: 16px !important;
    opacity: 0.6 !important;
}

/* ============================================================
   EMAIL FORM — Hidden by default, revealed on click
   ============================================================ */
form.fskill-entry .fskill-email-form {
    display: none !important;
    margin-top: 8px !important;
    text-align: left !important;
}

form.fskill-entry .fskill-email-form.fskill-visible {
    display: block !important;
    animation: fskillSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes fskillSlideIn {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hidden username field (auto-generated from email) */
form.fskill-entry .fskill-hidden-field,
form.fskill-entry .form-item-name {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* Form Items */
form.fskill-entry .fskill-email-form .form-item {
    margin-bottom: 20px !important;
    position: relative !important;
}

form.fskill-entry .fskill-email-form .form-item label,
form.fskill-entry .fskill-email-form label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #6b6b7e !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    font-family: var(--fskill-entry-font) !important;
}

/* All Text Inputs */
form.fskill-entry .fskill-email-form input[type="text"],
form.fskill-entry .fskill-email-form input[type="email"],
form.fskill-entry .fskill-email-form input[type="password"],
form.fskill-entry .fskill-email-form input.form-text,
form.fskill-entry .fskill-email-form input.form-email,
form.fskill-entry .fskill-email-form .form-text {
    width: 100% !important;
    height: 50px !important;
    padding: 0 16px !important;
    border: 1.5px solid var(--fskill-entry-border) !important;
    border-radius: var(--fskill-entry-input-radius) !important;
    font-size: 15px !important;
    font-family: var(--fskill-entry-font) !important;
    background: rgba(255, 255, 255, 0.7) !important;
    color: var(--fskill-entry-text) !important;
    box-sizing: border-box !important;
    transition: all 0.25s ease !important;
    outline: none !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
}

form.fskill-entry .fskill-email-form input:focus {
    border-color: var(--fskill-entry-text) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(26, 26, 46, 0.08) !important;
}

form.fskill-entry .fskill-email-form input::placeholder {
    color: #b0adb5 !important;
}

/* Password wrapper — Drupal wraps password in confirm-parent etc. */
form.fskill-entry .fskill-email-form .password-confirm,
form.fskill-entry .fskill-email-form .js-form-type-password-confirm {
    margin-bottom: 0 !important;
}

form.fskill-entry .fskill-email-form .password-strength {
    margin-top: 8px !important;
}

form.fskill-entry .fskill-email-form .password-confirm-message {
    font-size: 12px !important;
    margin-top: 4px !important;
}

form.fskill-entry .fskill-email-form .password-suggestions {
    font-size: 12px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    background: #f8f7f5 !important;
    margin-top: 8px !important;
}

/* Description text  — hide all descriptions inside form */
form.fskill-entry .fskill-email-form .description,
form.fskill-entry .description {
    display: none !important;
}

/* ============================================================
   SUBMIT BUTTON — "Continue →"
   ============================================================ */
form.fskill-entry .fskill-entry-actions {
    display: none !important;
    margin-top: 24px !important;
    text-align: center !important;
}

form.fskill-entry .fskill-entry-actions.fskill-visible {
    display: block !important;
}

form.fskill-entry .fskill-entry-actions input[type="submit"],
form.fskill-entry .fskill-entry-actions #edit-submit,
form.fskill-entry .fskill-entry-actions .form-submit {
    width: 100% !important;
    height: 52px !important;
    border: none !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #1a1a2e 0%, #2d2d4a 100%) !important;
    color: #ffffff !important;
    font-family: var(--fskill-entry-font) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 16px rgba(26, 26, 46, 0.2) !important;
    letter-spacing: 0.03em !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

form.fskill-entry .fskill-entry-actions input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(26, 26, 46, 0.3) !important;
    background: linear-gradient(135deg, #232340 0%, #3a3a5c 100%) !important;
}

form.fskill-entry .fskill-entry-actions input[type="submit"]:active {
    transform: translateY(0) !important;
}

/* ============================================================
   LOGIN LINK
   ============================================================ */
.fskill-entry-footer {
    margin-top: 28px !important;
    font-size: 13px !important;
    color: var(--fskill-entry-muted) !important;
    font-family: var(--fskill-entry-font) !important;
}

.fskill-entry-footer a {
    color: var(--fskill-entry-text) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.fskill-entry-footer a:hover {
    color: #e94560 !important;
}

/* ============================================================
   STATUS MESSAGES
   ============================================================ */
form.fskill-entry .messages {
    border-radius: 12px !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    margin-bottom: 20px !important;
    font-family: var(--fskill-entry-font) !important;
}

form.fskill-entry .messages--error {
    background-color: #fef2f2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
    form.fskill-entry .fskill-entry-card {
        padding: 36px 24px 32px !important;
        border-radius: 20px !important;
    }

    .fskill-entry-brand {
        font-size: 30px !important;
    }

    .fskill-entry-tagline {
        font-size: 14px !important;
        margin-bottom: 28px !important;
    }

    .fskill-btn-google-signin {
        height: 50px !important;
        font-size: 14px !important;
    }
}