/*
 * Comprehensive styles for the register.html page.
 * This file contains all necessary custom styles, including general theme overrides
 * and page-specific adjustments, for a standalone register page.
 */

/* Custom variables for Graphical Studios theme (monochrome adaptation) */
:root {
    /* Bootstrap color overrides to ensure monochrome palette */
    --bs-black:#111111;
    --bs-gray:#8a8a8e;
    --bs-gray-dark:#343a40;
    --bs-gray-100:#f8f9fa;
    --bs-gray-200:#e9ecef;
    --bs-gray-300:#dee2e6;
    --bs-gray-400:#ced4da;
    --bs-gray-500:#adb5bd;
    --bs-gray-600:#8a8a8e;
    --bs-gray-700:#495057;
    --bs-gray-800:#343a40;
    --bs-gray-900:#202020;
    --bs-white:#fff;

    /* Custom spacing variables for layout */
    --py-vh-2: 3vh;
    --py-vh-3: 6vh;
    --py-vh-4: 9vh;
    --py-vh-5: 12vh;
    --px-vw-5: 5vw;
}

/* Body overrides for the dark theme */
body {
    background-color: black !important;
    color: white !important;
    /* Ensure body itself doesn't have min-height for correct footer placement */
    min-height: 0;
}

/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #222;
}
::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Navbar hidden state and general navbar styling */
.navbar-hidden {
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}
#navScroll:not(.navbar-hidden) {
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
}
.pt-navbar {
    padding-top: 100px; /* Adjust this value based on your navbar's height */
}

/* Navbar specific styles */
.navbar{padding-top:32px;padding-bottom:32px}
.navbar.scrolled{padding-top:12px;padding-bottom:12px;background-color:#111}
.navbar-dark a.nav-link{color:#fff;border-bottom:2px solid transparent;margin:0 1rem;font-size:1.33rem}
.navbar-dark a.nav-link:hover{border-bottom:2px solid #fff}

/* Custom focus ring for inputs */
input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(200, 200, 200, 0.5);
    border-color: #cccccc;
}

/* Specific overrides for form elements to ensure monochrome look */
.form-control.bg-gray-800.border-dark {
    background-color: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-dark) !important;
    color: white !important;
}
.form-control.bg-gray-800.border-dark::placeholder {
    color: var(--bs-gray-500) !important;
}
.form-check-input {
    background-color: var(--bs-gray-700);
    border-color: var(--bs-gray-600);
}
.form-check-input:checked {
    background-color: var(--bs-gray-500);
    border-color: var(--bs-gray-500);
}
.form-check-label {
    color: white;
}
.form-text {
    color: var(--bs-gray-500) !important;
}

/* Custom button styles */
.btn-white {
    background-color: white !important;
    color: black !important;
}
.btn-white:hover {
    background-color: var(--bs-gray-200) !important;
    color: black !important;
}
.btn-outline-light {
    --bs-btn-color:var(--bs-light);
    --bs-btn-border-color:var(--bs-light);
    --bs-btn-hover-color:var(--bs-gray-900);
    --bs-btn-hover-bg:var(--bs-light);
    --bs-btn-hover-border-color:var(--bs-light);
}

/* Gradient background for the right column */
.gradient {
    background-image:
        linear-gradient(24deg, rgba(32,32,32,1), transparent 21%),
        linear-gradient(198deg, rgba(138,138,142,0.2) 11%, transparent 0),
        linear-gradient(50deg, rgba(17,17,17,1) 5%, rgba(52,58,64,1) 32%, rgba(138,138,142,1) 35%, rgba(200,200,200,1) 65%, rgba(248,249,250,1) 83%, rgba(255,255,255,1) 91%);
}

/* Custom link fancy effect */
.link-fancy {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    position: relative;
}
.link-fancy-light {
    color: #fff;
}
.link-fancy:hover {
    color: var(--bs-gray);
}
.link-fancy-light:hover {
    color: var(--bs-gray);
}
.link-fancy:before {
    content:'';display:block;height:1px;width:100%;transform-origin:left;position:absolute;left:0;bottom:0;
    background-image:linear-gradient(90deg,var(--bs-gray-300) 0,var(--bs-gray-300) 25%,transparent 0,transparent 50%,var(--bs-gray-300) 0,var(--bs-gray-300) 75%,transparent 0,transparent);
    background-repeat:no-repeat;background-position:0;background-size:400% 1px;
    transition:background-position .8s ease-in-out;
}
.link-fancy-light:before {
    background-image:linear-gradient(90deg,#fff 0,#fff 25%,transparent 0,transparent 50%,#fff 0,#fff 75%,transparent 0,transparent);
}
.link-fancy:hover:before{background-position:100%}

/* Footer Styling */
footer {
    background-color: var(--bs-black); /* Ensure background is black */
    color: var(--bs-white); /* Ensure text is white */
    padding: 2rem 0; /* Add some vertical padding */
    font-size: 0.9rem; /* Slightly smaller font for copyright */
    border-top: 1px solid var(--bs-gray-dark); /* Subtle top border */
}
/* Ensure the main content area pushes the footer down */
html.h-full, body.h-full {
    height: 100%;
}

.h-100.container-fluid.pt-navbar.d-flex.flex-column {
    min-height: calc(100vh - 100px); /* Adjust 100px for navbar height, important for short content */
}

.h-100.row.flex-grow-1 {
    flex-grow: 1;
}