/* © 2025 Widder Italia */

:root {
    --bianco: #FFFFFF;
}

/* Layout base */
html, body {
    height: 100%;
}
body {
    display: flex;          /* sidebar e main affiancati */
    font-family: sans-serif;
}

.navbar {
    height: 100px;
}

.space {
    padding-top: 100px;
}

/* Sidebar indipendente dal contenuto */
.sidebar {
    position: sticky;
    top: 100px;
    height: calc(100vh - 100px);
    overflow-y: auto;
    background: #303030;
    transition: transform 0.3s ease, width 0.3s ease;
    width: 350px;           /* larghezza di default desktop */
}

/* Contenuto principale */
main {
    position: relative;
    margin-bottom: 100px;
    flex: 1;                /* prende lo spazio rimanente */
    transition: width 0.3s ease, margin-left 0.3s ease;
	min-height: calc(100vh - 100px);
}

footer {
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
}

.nav-item:hover {
    background: #4C4C4C;
}

.nav-link, .nav-link:hover {
    color: var(--bianco);
}

li {
    padding-bottom: .5rem;
}

li:last-child {
    padding-bottom: 0;
}

h3 {
    line-height: 2;
}

.top-100 {
	margin-top: 100px;
}

.microsite-domain section {
    margin-bottom: 2rem;
}

.link-preview input[type="text"] {
	width: 100%;
	padding: 10px;
	font-size: 16px;
	margin-bottom: 10px;
}

.link-preview button {
	padding: 10px 20px;
	font-size: 16px;
	background-color: #007BFF;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

.link-preview button:hover {
	background-color: #0056b3;
}

.link-preview .result {
	margin-top: 20px;
	font-size: 18px;
}

/* ====== Desktop (≥768px) ====== */
@media (min-width: 768px) {
    /* sidebar aperta di default */
    /* quando ha la classe .sidebar-collapsed, nascondila */
    .sidebar.sidebar-collapsed {
        width: 0;
    }
    /* e fai diventare il main al 100% */
    .sidebar.sidebar-collapsed + main {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }
}

/* ====== Mobile (<768px) ====== */
@media (max-width: 767.98px) {
    /* sidebar in overlay, fuori schermo a sinistra */
    .sidebar {
        position: fixed;
        top: 100px;
        left: 0;
        width: 100vw;  /* larghezza 100% viewport */
        height: calc(100vh - 100px);
        transform: translateX(-100%);
        z-index: 1040;
    }
    /* quando aperta via .sidebar-open */
    .sidebar.sidebar-open {
        transform: translateX(0);
    }
    /* main resta 100% sotto la sidebar */
    main {
        width: 100%;
        flex: 1;
    }
}