@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@900&family=Work+Sans:wght@900&display=swap');

@font-face {
    font-family: "Albas";
    src: url("/fonts/ALBAS.ttf");
}

a {
    cursor: pointer;
}

.wings {
    position: relative;
    text-align: center;
    margin: auto;
    padding: 24px 0;
}

.funbox {
    box-sizing: content-box !important;
    position: relative;
    text-align: center;
    width: 1000px;
    margin: auto;
    background-color: var(--bg-container) !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    padding: 32px;
    color: var(--text-primary);
}

.btop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
    font-family: var(--font-sans);
    text-align: left;
}

.btop form {
    display: inline-flex;
    align-items: center;
}

/* Nav Link List */
.btop-nav {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 12px;
    white-space: nowrap !important;
}

/* Logo Specific styling */
.btop-logo {
    margin-right: 16px;
}

.btop-logo a {
    display: inline-block;
    padding: 4px 0;
    overflow: visible !important;
}

.btop-logo a span {
    visibility: visible !important;
    font-family: "Albas", sans-serif !important;
    text-transform: uppercase !important;
    font-size: 40px !important;
    font-weight: normal !important;
    display: inline-block !important;
    line-height: 1.25 !important;
    padding-right: 0.05em !important;
    padding-bottom: 0.05em !important;
    letter-spacing: 0.02em !important;
    color: #3b5998 !important;
    -webkit-text-fill-color: #3b5998 !important;
    filter: drop-shadow(2px 2px 0px #1d2a4a);
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.btop-logo a span::after {
    content: "\a0";
    display: inline;
}

.btop-logo a:hover span {
    color: #00c0ff !important;
    -webkit-text-fill-color: #00c0ff !important;
    filter: drop-shadow(2.5px 2.5px 0px #0d1e57);
    transform: scale(1.05) rotate(-1.5deg);
}

/* Logo Edu specific wrapper */
.logo-edu-container a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.btop-edu-text {
    font-family: 'Shadows Into Light Two', cursive, sans-serif;
    font-size: 52px !important;
    color: rgb(250, 100, 245) !important;
    -webkit-text-fill-color: rgb(250, 100, 245) !important;
    background: none !important;
    letter-spacing: normal !important;
    margin-left: 2px;
    margin-top: -12px;
    transform: rotate(-5deg);
    display: inline-block;
    transition: color 0.2s ease, transform 0.2s ease;
}

.logo-edu-container a:hover .btop-edu-text {
    color: rgb(11, 9, 140) !important;
    -webkit-text-fill-color: rgb(11, 9, 140) !important;
    transform: rotate(-5deg) scale(1.05);
}

/* Standard Nav Item Styling */
.btop-make a, .btop-browse a, .btop-mine a {
    display: inline-block !important;
    padding: 4px 8px !important;
    font-family: 'Work Sans', 'Outfit', sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    font-size: 28px !important;
    letter-spacing: 0.02em !important;
    color: var(--slate-600) !important;
    border-radius: var(--radius-sm);
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    background: transparent !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.btop-make a span, .btop-browse a span, .btop-mine a span {
    display: inline-block !important;
    visibility: visible !important;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Make Hover State */
.btop-make a:hover {
    transform: scale(1.1) rotate(-2deg);
}
.btop-make a:hover span {
    background: linear-gradient(to bottom, #1d6edc 50%, #00d4ff 50%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(3px 3px 0px #0b3a75) !important;
}

/* Browse Hover State */
.btop-browse a:hover {
    transform: scale(1.1) rotate(2deg);
}
.btop-browse a:hover span {
    background: linear-gradient(to bottom, #1066e4 50%, #0433a0 50%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(3px 3px 0px #021a54) !important;
}

/* My Stuff Hover State */
.btop-mine a:hover {
    transform: scale(1.1) rotate(-2deg);
}
.btop-mine a:hover span {
    background: linear-gradient(to bottom, #ff9eb5 50%, #dc2626 50%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(3px 3px 0px #700f23) !important;
}

/* Header Right Panel */
.btop-misc {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    background: none;
    padding: 0;
    float: none;
    width: auto;
    margin-left: auto;
    white-space: nowrap !important;
}

.btop-search {
    position: relative;
    display: inline-block;
}

.btop-search input.input-text {
    box-sizing: border-box !important;
    padding-left: 12px;
    padding-right: 32px;
    height: 34px;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 17px; /* pill shape */
    border: 1px solid var(--slate-200);
    background-color: var(--slate-50);
    transition: all 0.2s ease;
    width: 180px; /* Always expanded */
    color: var(--text-primary);
    cursor: text;
}

.btop-search input.input-text:focus {
    background-color: #ffffff;
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--slate-100);
}

.btop-search button.search-btn {
    position: absolute;
    top: 50%;
    right: 3px;
    transform: translateY(-50%);
    border: none;
    background: none;
    padding: 8px;
    margin: 0;
    cursor: pointer;
    color: var(--slate-400);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    pointer-events: auto; /* Enable button clicks to submit search */
}

.btop-search input.input-text:focus + button.search-btn {
    color: var(--accent);
}

.btop-search button.search-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Auth Status component container */
#bl-authstatus {
    font-size: 14px;
    white-space: nowrap !important;
}

.btop-login a, .btop-logout a {
    font-weight: 500;
    color: var(--slate-600) !important;
}

.btop-login a:hover, .btop-logout a:hover {
    color: var(--accent) !important;
    text-decoration: none !important;
}

.teacher-banner {
    background: linear-gradient(135deg, var(--accent-pink), #f472b6);
    color: white;
    text-align: center;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 14px;
    box-shadow: var(--shadow-sm);
}

.contents {
    text-align: left;
    margin-top: 16px;
    min-height: 450px;
}